Assigns min-width to a bootstrap panel - html

Question

I'm using one panel panel-defaul in my page to show some data but I need that the min-width of my panel be 720px if the Windows is resizing to less of 720px I need that appear a scrollX but the panel can´t be less of 720px like the use of table-responsive when I need to do something like that but using tables I do this:
HTML
<div class="example-table table-responsive">
<table id="example-table" class="table table-hover">
</table>
</div>
CSS
.example-table{
max-width: 720px;
}
#example-table{
min-width: 720px;
}
And if I use the rule .panel{min-widht:720px;} nothing happen.
How can I get the same effect in my panel?
EDIT: Ok I try this in jsfiddle and my exact problema is that no matter that I set the min-width: 760px the content in the panel-body that is the two col-sm-6 create two rows but I need that the two col-sm-6 keep the same two columns and not pass to be two rows, at the first I think that was because the min-weidth but now I don´t know why this happen even when the scrollX is created.

Answer 1

So according to your updated question, you want your columns to remain inline irrespective of screen width. You can do that by changing your col-sm-6 to col-xs-6 like this:
<div class="col-xs-6">
<strong>Something here</strong>
</div>
<div class="col-xs-6">
<strong>Something here</strong>
</div>
jsFiddle: https://jsfiddle.net/rvzy9s5k/1/

Answer 2

You can use media-querieslike this:
#media (min-width: 720px) {
.example-table {
<!-- Your css properties here -->
}
}