Menu
Using bootstrap 3 to design my responsive website, I'm having trouble getting the layout to work below a desktop width resolution of 1366px v 786px. When the layout is decreased down to 1024px, it is considered the mobile breakpoint.
How can I control when the layout switched from desktop to mobile layout?
this is my html
<body>
<div class="container-fluid">
<div class="container-fluid header">
<div id="container">
</div>
</div>
<div class="row-fluid">
<div class="col-lg-3">
<div class="well">
</div>
</div>
<div class="col-lg-9">
<div class="col-lg-6">
<div class="title">
<h3>title 1</h3>
</div>
</div>
<div class="col-lg-6">
<div class="title">
<h3>title 2</h3>
</div>
</div>
</div>
</div>
</div>
430
The row-fluid and container-fluid are deprecated from BS 3, so now you just use container and row
You can use the new "small" grid classes (col-sm-*) to prevent the layout from stacking on smaller display..
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3">
<div class="well">
</div>
</div>
<div class="col-lg-9 col-sm-9">
<div class="col-lg-6 col-sm-6">
<div class="well">
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="well">
</div>
</div>
</div>
</div>
</div>
Demo: http://bootply.com/71450
If you want it to never stack, even on the smallest displays, use the tiny col-xs-* grid classes.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
