58

I’ve been working on this the whole day but don’t come up with a solution. I have 3 columns in one row in a container.

1: right content – pull-right

2: navigation – pull-left

3: main content

What it looks on big screens:

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

What it should look like on smaller screens:

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

What it looks like now:

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

I think it’s just a simple floating problem. But I tried out nearly all possibilities.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
user2982964
  • 583
  • 1
  • 5
  • 4

2 Answers2

100

Bootstrap 3

Using Bootstrap 3's grid system:

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

Working example: http://bootply.com/93614

Explanation

First, we set two columns that will stay in place no matter the screen resolution (col-xs-*).

Next, we divide the larger, right hand column in to two columns that will collapse on top of each other on tablet sized devices and lower (col-md-*).

Finally, we shift the display order using the matching class (col-md-[push|pull]-*). You push the first column over by the amount of the second, and pull the second by the amount of the first.

Community
  • 1
  • 1
Sean Ryan
  • 6,048
  • 2
  • 25
  • 23
6

Try this...

<div class="row">
    <div class="col-xs-3">
        Menu
    </div>
    <div class="col-xs-9">
        <div class="row">
          <div class="col-sm-4 col-sm-push-8">
          Right content
          </div>
          <div class="col-sm-8 col-sm-pull-4">
          Content
          </div>
       </div>
    </div>
</div>

Bootply

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 2
    Having both `col-sm-X` and `col-md-X` is unnecessary. If you set the grid at sm, it will stay in place at md. – Sean Ryan Nov 12 '13 at 13:01
  • Also, you should always wrap columns in a `row` so it will trim the gutters off the first and last columns. See http://bootply.com/93628 for a visual explanation. – Sean Ryan Nov 12 '13 at 13:18