CODEWITHSUNDEEP
cssmedia-queriesresponsive
iantresman
iantresman

Reputation: 289

3-column responsive layout with middle column top

I have an old 3 column website where the middle column 2 contains the important content (of varying size).

Is it possible using CSS alone (i.e. the template is untouched), to make it responsive such that on narrow screens, the order (top to bottom) becomes Col-2 then Col-1, then Col-3? ie.

Template:

<div class="col-1">Left Sidebar</div>
<div class="col-2">Main content</div>
<div class="col-3">Right sidebar</div>

I'd like media queries on smaller screen widths to display as:

Main content

Left Sidebar

Right sidebar

Upvotes: 0

Views: 1000

Answers (1)

Johannes
Johannes

Reputation: 67778

You can achieve that using flexbox: In the media queries, you assign display: flex and flex-direction: column to the container (if there is no container / parent element, that's the body tag), and assign the order settings (numbers) to the single items according to your desired order as shown below:

body { 
  display: flex;
  flex-direction: column;
}
.col-1 {
  order: 2;
  }
.col-2 {
  order: 1;
  }
.col-3 {
  order: 3;
  }
<div class="col-1">Left Sidebar</div>
<div class="col-2">Main content</div>
<div class="col-3">Right sidebar</div>

Upvotes: 3

Related Questions