CODEWITHSUNDEEP
cssflexbox
reknirt
reknirt

Reputation: 2254

How to reorder flexbox items from single column on mobile to colum and row on desktop

I have a flexbox container made up of three divs

<div className="container">

  <div className="location-select-box">
    <h3>Find A Retailer</h3>
    <p>some text</p>
  </div>

  <div className="map">
    /** full width map image mobile, 50% width desktop **/
  </div>

  <div className="location-listing">
     <Store />
     <Store />
  </div>

</div>

On mobile I need them in a single column, just like the order they're in -- I have this working.

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

However on Desktop, I essentially need the page split into two columns, with the map on the right 50% width, and the location-select-box and location-listing on the left in two rows -- location-select-box above location-listing

I can't figure this out. my CSS for desktop:

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}

I've tried adding various order properties to each section but I can't find a combination that fits the screen to 50% columns with two rows in column 1.

Thank you.

Upvotes: 1

Views: 59

Answers (1)

Unbywyd
Unbywyd

Reputation: 966

https://jsfiddle.net/46t3knvf/

You must use flex with order. Below example for desktop, do not forget to use @media queries

HTML:

<div class="container">

  <div class="location-select-box">
     25%
  </div>

  <div class="map">
     50%
  </div>

  <div class="location-listing">
    25%
  </div>

</div>

CSS:

.container {
  display: flex;
  text-align: center;
}

.map {
  flex-basis: 50%;
  order: 3;
  flex-grow:1;
  background-color: red;
  padding: 20px;
  margin: 5px;
}

.location-select-box {
  order: 1;
  flex-grow:1;
  background-color: blue;
  padding: 20px;
  margin: 5px;
}
.location-listing {
  order: 2;
  flex-grow:1;
  background-color: green;
  padding: 20px;
  margin: 5px;
}

Method 2

https://jsfiddle.net/u0g5a2w4/

HTML:

<div class="container">

  <div class="location-select-box">
     50%
  </div>

  <div class="map">
     50%
  </div>

  <div class="location-listing">
    50%
  </div>

</div>

CSS

.container {
  display: flex;
  flex-direction: row-reverse;
  text-align: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.map {
  width: 50%;
  order: 1;
  background-color: red;
}

.location-select-box {
  order: 2;
  width: 50%;
  background-color: blue;
}
.location-listing {
  order: 3;
  background-color: green;
  width: 50%;
}

Upvotes: 2

Related Questions