CSS Flexbox affecting Bootstrap 3 layout

Question

I'm trying to create the layout below in Bootstrap 3.

I can achieve layout shown under 'sm', and with flexbox I want to swap div 1 and 2 for xs screens. The problem is when I make the containing div a flexbox, it pushes down div 3 on the sm layout, so that it is underneath div 2.

<!--[2 Column]-->
  <div class="row flex-container">


    <!--[DIV 2]-->
    <div class="col-xs-12 col-sm-4 flex-item">
      <p class="portfolio-content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
      </p>
    </div>
    <!--[/DIV 2]-->


    <!--[DIV 1]-->
    <div class="col-xs-12 col-sm-8 flex-item">

      <!-- main image-->
      <img class="img mb-20" src="img/6.jpg"/>

    </div>
    <!--[/DIV 1]-->


    <!--[DIV 3]-->
    <div class="col-xs-12 col-sm-8 flex-item">
      <img class="img" src="img/1.jpg"/>
      <img class="img" src="img/2.jpg"/>
      <img class="img" src="img/3.jpg"/>
    </div>
    <!--[/DIV 3]-->

  </div>
  <!--/[2 Column]-->

And the CSS

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

If I remove 'flex-container' from my containing div class, it then goes back to being as I would like it to be in the picture above. Is there a way to solve this so that I can have my correct layout for sm, even with flexbox?

I originally tried to solve this using Masonry, but a Stackoverflow user suggested flexbox instead (which I'd not used before) so hopefully I'm on the right track. If not.. any pointers would be grand!

Here is a JS Fiddle with the media query and flexbox ordering included.

Just want to say excellent question - great explanation, code examples, and diagram. Taking a look... — Jack Koppa, Mar 14 '17 at 14:55
It is possible, but cumbersome and hard to achieve good browser support. I got [this far](https://jsfiddle.net/Justastudent/v9txmn6v/), which works in Firefox. Also see [this question](http://stackoverflow.com/q/27119691/962603). The only way around this would be to set a fixed height on the row - is that something that is acceptable for you? — Just a student, Mar 14 '17 at 15:14
using flexbox in bootstrap 3 destroys the row column responsive behaviour of bootstrap..so I feel this is not the way to go. — philomath, Mar 14 '17 at 15:15
@philomath That is why the flexbox layout is only activated using a media query. But I do agree with you that forcing flexbox is not a great solution... — Just a student, Mar 14 '17 at 15:16
I was the user that suggested flexbox in the other question, but the original question (how to use isotope) was never clear. The attempted code looks nothing like the picture. Is the goal to make the #2 col full height beside 1 and 3?. Is the whole thing supposed to be full viewport height? What happens if the content of 3 is taller? Does it scroll, or extend taller that 2? — Carol Skelly, Mar 14 '17 at 15:26
I guess I'm not understanding (as I didn't in the original question) why not just use Bootstrap like this? http://www.codeply.com/go/94pLz9xLab __ if this is not the goal, please clarify the question. — Carol Skelly, Mar 14 '17 at 15:29
Thanks @Justastudent that is excellent however as you say the browser support is an issue. I've just had a potentional brain wave that seems to have worked... [is this acceptable?](https://jsfiddle.net/ysz6rvh8/) I've only initialised flexbox for xs screens as it doesn't affect the bootstrap layout. Then sm and higher then won't use flexbox, and the layout issue is resolved? — paddyfields, Mar 14 '17 at 15:33
@ZimSystem - that is exactly what I was trying to do, thank very much. From what I can see you are just using 'pull right', as this doesn't affect the col-xs-12 layout? — paddyfields, Mar 14 '17 at 15:37
Oops, my 'is this acceptable' link before, should have been this: [link](https://jsfiddle.net/ysz6rvh8/1/) — paddyfields, Mar 14 '17 at 15:41

score 3 · Accepted Answer · answered Mar 14 '17 at 15:43

Use the Boostrap grid columns like this..

<div class="container-fluid">
    <div class="row">
    <div class="col-xs-12 col-md-4 pull-right">
        <div class="well"> 
          <h4>1</h4>
        </div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="well tall"> 
          <h4>2</h4>
        </div>
      </div>
      <div class="col-xs-12 col-md-4 pull-right">
        <div class="well"> 
          3
        </div>
      </div>
   </div>
</div>

Demo: http://www.codeply.com/go/94pLz9xLab

CSS Flexbox affecting Bootstrap 3 layout

1 Answers1

Linked

Related