mobinoob mobinoob - 5 months ago 14
HTML Question

How to split Bootstrap column in mobile mode

I created a bootstrap page with a top toolbar and two columns. On the left column I put the menu and a small block of text ( that maybe i will split in two). On the right column I have a big space where I show items (divs with imgs) based on what I select on the menu.

The design works well on computers, but when I open on mobile I'd like to move the bloc of text of the left column at the end of the mobile-page.

layout

The Top layout shows how it looks on a PC. The bottom left is what I would like to be able to do. The bottom right is another version of what I would like to do.

Right now I can only have the big textbox right after the menu when in mobile mode.

My code is like this:

<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3" id="menu">..
<div id="text"></div></div>
<div class="col-xs-12 col-sm-9 col-md-9">
<div class="container">
...items
</div>
</div> <!-- row..useless probably -->


How should I split the divs?

Answer

One Textbox

Place the blocks in the order, which is necessary for the mobile screen. Then make menu right-floating on the wide screen.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#menu    { background: #cf9; height:  50px; }
#toolbar { background: #f9c; height:  50px; }
.items   { background: #9cf; height: 250px; }
.textbox { background: #fc9; height: 200px; }

@media (min-width: 768px) {
  .items  {
    float: right !important;
  }
}
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12" id="toolbar">Toolbar</div>
    <div class="col-sm-3"  id="menu">Menu</div>
    <div class="col-sm-9 items">Items</div>
    <div class="col-sm-3 textbox">Textbox</div>
  </div>
</div>

Two Textboxes

Wrap menu and textbox 1 into an additional block. Then the problem will be similar to the previous one.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#menu    { background: #cf9; height:  50px; }
#toolbar { background: #f9c; height:  50px; }
.items   { background: #9cf; height: 250px; }
.textbox { background: #fc9; height: 100px; }

@media (min-width: 768px) {
  .items  {
    float: right !important;
  }
}
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12" id="toolbar">Toolbar</div>
    <div class="col-sm-3">
      <div class="row">
        <div class="col-sm-12" id="menu">Menu</div>
        <div class="col-sm-12 textbox">Textbox 1</div>
      </div>
    </div>
    <div class="col-sm-9 items">Items</div>
    <div class="col-sm-3 textbox">Textbox 2</div>
  </div>
</div>