0

Sorry if my question seems strange, I had a lot of struggles to find a good way to ask this. I'm currently trying to put in HTML the image you have under, but I don't know if it's possible to set a column (or several divs) so that's they're aligned, but then when i'm switching to a mobile device, the column (or the several divs) appears at the end instead of between the divs from the left. I did some tries, but nothing good showed up, plus I'm not really used to Twitter's Bootstrap

Thank you in advance

On left, the desktop version, on right, the mobile version

Jaeger
  • 1,686
  • 1
  • 30
  • 50
  • A http://jsfiddle.net/ would be appreciated. You can try display: table display-table-row... like in this example http://snook.ca/archives/html_and_css/getting_your_di – lastboy Feb 25 '16 at 06:51
  • Another option will be like in this post http://stackoverflow.com/questions/7693224/how-do-i-right-align-div-elements – lastboy Feb 25 '16 at 07:25

3 Answers3

1

http://codepen.io/anon/pen/WwewBR

A super dirty way to do it using Flexbox and its order property.

Tim Roberts
  • 1,120
  • 2
  • 9
  • 25
1

You can try putting the divs on left inside a container

user3589690
  • 120
  • 8
1

This is my approach using Twitter's Bootstrap. The browser reads the page from top to bottom. So using the arrangement after resizing the browser its possible to get the column on the right to come in between the first two columns and the last two. Hope this will be of help.

<div class="container">
    <div class="col-md-8">
        <div class="thumbnail">Col 1</div>
        <div class="thumbnail">Col 2</div>
    </div>
    <div class="navbar-right col-md-4 thumbnail">
        Long Column<br>
        Long Column<br>
        Long Column<br>
        Long Column<br>
        Long Column<br>
        Long Column<br>
    </div>
    <div class="col-md-8">
        <div class="thumbnail">Col 3</div>
        <div class="thumbnail">Col 4</div>
    </div>
</div>
mark kasina
  • 140
  • 1
  • 5