0

I am creating a 2 column layout that is single column on mobile. The approach has been to order the elements in the vertical order that is desired on mobile, and make any media-query specific CSS changes targetting desktop/tablet.

Here is a codepen for convenience as well to see it in a larger viewport.

.m0 {
  margin: 0;
}


/* .row */
.grid {
  // Only here for debugging grid lines
  overflow: hidden;
}

/* col-* */
.grid-col {
  padding: 1rem;
  color: white;
}


#banner {
  background: steelblue;
  height: 350px;
}

#nav {
  background: mediumslateblue;
}

#info {
  background: coral;
  height: 470px;
}

#feed {
  background: mediumorchid;
  height: 600px;
}

#content {
  background: darkcyan;
  height: 250px;
}

.grid-col {
  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="grid row">
    <div id="banner" class="grid-col col-md-8">
      <h2>Banner</h2>
      <p>This element is the only fixed height element on the page at 350px</p>
    </div>
    <div id="info" class="grid-col col-md-4">
      <h2>Info</h2>
      This section contains elements that make it's height unknown. Assume it is taller than <code>Banner</code>
    </div>
    
    <div id="content-and-nav" class="grid-col col-md-8">
      <div id="nav" class="grid-col">
        <h5 class="m0">Content Nav</h5>
      </div>
      <div id="content" class="grid-col">
        <h2>Content</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, saepe at eum veritatis quis, odit sequi quos tenetur, voluptates inventore magni fugit ipsam facere error quibusdam fugiat dolores! Quia, sapiente.</p>
      </div>
    </div>
    <div id="feed" class="grid-col col-md-4">
      <h2>Feed</h2>
      This section will grow in height as the user clicks a "Load More" button.
    </div>
  </div>
</div>

Here is a screenshot that illustrates the desired outcome:

enter image description here

My Question Is:

Is it possible to achieve the desired effect in the screenshot using only CSS, and without changing the order of the elements?

Asons
  • 84,923
  • 12
  • 110
  • 165
elzi
  • 5,442
  • 7
  • 37
  • 61
  • Per the answer linked regarding direction:column : "It requires the container to have a fixed height, so the items know where to wrap." This disqualifies it from a valid solution. Definitive answer when using Flexbox then is "No"? – elzi Aug 14 '17 at 20:44
  • then the oldish float technic ? https://codepen.io/anon/pen/OjxYNM – G-Cyrillus Aug 15 '17 at 05:59
  • @G-Cyr man... you know you're spending too much time in "Modern Tech" when you forget that floats will do the job. Thanks much. – elzi Aug 16 '17 at 02:17

0 Answers0