Twitter Bootstrap Question posted in

Is it possible to determine which div appears first on mobile version? – Twitter bootstrap

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

Tags:

3

Answers


  1. 0

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

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

    Login or Signup to reply.
  2. 0

    You can try putting the divs on left inside a container

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search