Adaptable, two-column design: Place one column between the other column

Question

Adaptable, two-column design: Place one column between the other column

I have a website that adapts to different screen sizes, featuring a two-column layout in larger browser windows. Currently, the layout is achieved using the float property. However, I want the layout to switch to a single column on smaller screens. In this new configuration, the content from the second column should be displayed between the elements of the main column, as illustrated here:

https://i.sstatic.net/giBKx.png

<div class="two-columns">
  <div class="main-column">
    <div class="red-element"></div>
    <div class="yellow-element"></div>
  </div>
  <div class="sidebar-column">
    <div class="green-element"></div>
  </div>
</div>

Although I attempted a flex-box-based solution similar to the one described in this question, the flex-basis property appears to be unsupported in Safari when used with flex-direction: column. Ensuring proper support in Safari is crucial since it is the primary browser for my visitors.

Is there a CSS-only method to achieve this layout adjustment without duplicating the green element in the markup?

html css responsive-design flexbox

Answer 1

Answer №1

Here's a simple solution using a single flex container:

<div class="container">
    <div class="box"> ... </div><!-- red box -->
    <div class="box"> ... </div><!-- green box -->
    <div class="box"> ... </div><!-- yellow box -->
</div>

For smaller screens, start by stacking them vertically:

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

.box {
    height: 100px;
    width: 100%;
}

To adjust the layout for larger screens:

@media (min-width: 800px) {

   .container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .box {
        flex-basis: 45%;
    }
}

When the screen is wider than 800px, the items will be displayed in a row with wrapping enabled. Each box will have enough width specified by flex-basis to fit only two on each line.

Complete demonstration:

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    background-color: #f5f5f5;
    border: 1px solid #aaa;
}

.box1 { background-color: red; }
.box2 { background-color: lightgreen; }
.box3 { background-color: yellow; }

.box {
    height: 100px;  
    width: calc(100% - 20px);
    margin: 5px 10px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

@media (min-width: 800px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .box {
        flex-basis: 45%;
    }
}

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
</div>

View jsFiddle Example

Regarding your concern:

...but flex-basis still seems to be unsupported in Safari when flex-direction is column

It appears that flex-basis is supported in Safari. However, you can use width or height properties as alternatives to flex-basis. More information can be found here: Differences between flex-basis and width.

Answer 2

Here's a simple solution using a single flex container:

<div class="container">
    <div class="box"> ... </div><!-- red box -->
    <div class="box"> ... </div><!-- green box -->
    <div class="box"> ... </div><!-- yellow box -->
</div>

For smaller screens, start by stacking them vertically:

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

.box {
    height: 100px;
    width: 100%;
}

To adjust the layout for larger screens:

@media (min-width: 800px) {

   .container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .box {
        flex-basis: 45%;
    }
}

When the screen is wider than 800px, the items will be displayed in a row with wrapping enabled. Each box will have enough width specified by flex-basis to fit only two on each line.

Complete demonstration:

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    background-color: #f5f5f5;
    border: 1px solid #aaa;
}

.box1 { background-color: red; }
.box2 { background-color: lightgreen; }
.box3 { background-color: yellow; }

.box {
    height: 100px;  
    width: calc(100% - 20px);
    margin: 5px 10px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

@media (min-width: 800px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .box {
        flex-basis: 45%;
    }
}

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
</div>

View jsFiddle Example

Regarding your concern:

...but flex-basis still seems to be unsupported in Safari when flex-direction is column

It appears that flex-basis is supported in Safari. However, you can use width or height properties as alternatives to flex-basis. More information can be found here: Differences between flex-basis and width.

Answer 3

Answer №2

When utilizing Bootstrap,

<div class="row">
    <div class="col-md-8">
        <div class="red-element"></div>
    </div>

    <div class="col-md-4">
        <div class="green-element"></div>
    </div>

    <div class="col-md-8>
        <div class="yellow-element"></div>
    </div>
    <div class="clearfix"></div>
</div>

This approach utilizes float methods and is compatible with all browsers.

Answer 4

When utilizing Bootstrap,

<div class="row">
    <div class="col-md-8">
        <div class="red-element"></div>
    </div>

    <div class="col-md-4">
        <div class="green-element"></div>
    </div>

    <div class="col-md-8>
        <div class="yellow-element"></div>
    </div>
    <div class="clearfix"></div>
</div>

This approach utilizes float methods and is compatible with all browsers.

Answer 5

Answer №3

To enhance the visual display of your elements, utilize @media along with the margin-top property. When specific screen widths are met (using @media), adjust the margin-top of the green element to -200%, and change the margin-top of the yellow element to 100%. The result is a visually appealing position switch between the two elements. Check out this link for an example:

http://jsbin.com/xozeviseka/edit?html,output

Answer 6

To enhance the visual display of your elements, utilize @media along with the margin-top property. When specific screen widths are met (using @media), adjust the margin-top of the green element to -200%, and change the margin-top of the yellow element to 100%. The result is a visually appealing position switch between the two elements. Check out this link for an example:

http://jsbin.com/xozeviseka/edit?html,output

Answer 7

Answer №4

To achieve the desired outcome, adjustments need to be made to the HTML structure.

*,*:after,*:before {
box-sizing:border-box;
}
.two-columns {
position:relative;
background:#EFEFEF;
border:1px solid #000;
}
.red-element,
.green-element,
.yellow-element {
margin-bottom:30px;
}
.red-element {
height:70px;
background:#FF0004;
}
.green-element {
height:70px;
background:#7ED321;
}
.yellow-element {
height:100px;
background:#F8E71C;
}
@media (min-width:767px) {
.main-column {
width:70%;
padding:10px;
}
.sidebar-column {
position:absolute;
right:0;
top:0;
width:30%;
padding:10px;
}
}

<div class="two-columns">
    <div class="main-column">
        <div class="red-element"></div>
            <div class="sidebar-column">
                <div class="green-element"></div>
            </div>
        <div class="yellow-element"></div>
    </div>
</div>

If you prefer not to alter the HTML structure, an alternative solution is to include a separate element that is only visible on mobile devices.

*,*:after,*:before {
box-sizing:border-box;
}
.two-columns {
    background: #EFEFEF;
    border: 1px solid #000;
    overflow: hidden;
}
.red-element,
.green-element,
.yellow-element {
margin-bottom:30px;
}
.red-element {
height:70px;
background:#FF0004;
}
.green-element {
height:70px;
background:#7ED321;
}
.yellow-element {
height:100px;
background:#F8E71C;
}
.hideMobile{
display:none;
}
@media (min-width:767px) {
.main-column {
width: 70%;
float: left;
padding: 10px;
}

.sidebar-column {
float: right;
width: 30%;
padding: 10px;
}
.showMobile {
display:none;
}
.hideMobile {
display:block;
}
}

<div class="two-columns">
  <div class="main-column">
    <div class="red-element"></div>
    <div class="green-element showMobile"></div><!--only for mobile-->
    <div class="yellow-element"></div>
  </div>
  <div class="sidebar-column hideMobile"><!--hide in mobile-->
    <div class="green-element"></div>
  </div>
</div>

Answer 8

To achieve the desired outcome, adjustments need to be made to the HTML structure.

*,*:after,*:before {
box-sizing:border-box;
}
.two-columns {
position:relative;
background:#EFEFEF;
border:1px solid #000;
}
.red-element,
.green-element,
.yellow-element {
margin-bottom:30px;
}
.red-element {
height:70px;
background:#FF0004;
}
.green-element {
height:70px;
background:#7ED321;
}
.yellow-element {
height:100px;
background:#F8E71C;
}
@media (min-width:767px) {
.main-column {
width:70%;
padding:10px;
}
.sidebar-column {
position:absolute;
right:0;
top:0;
width:30%;
padding:10px;
}
}

<div class="two-columns">
    <div class="main-column">
        <div class="red-element"></div>
            <div class="sidebar-column">
                <div class="green-element"></div>
            </div>
        <div class="yellow-element"></div>
    </div>
</div>

If you prefer not to alter the HTML structure, an alternative solution is to include a separate element that is only visible on mobile devices.

*,*:after,*:before {
box-sizing:border-box;
}
.two-columns {
    background: #EFEFEF;
    border: 1px solid #000;
    overflow: hidden;
}
.red-element,
.green-element,
.yellow-element {
margin-bottom:30px;
}
.red-element {
height:70px;
background:#FF0004;
}
.green-element {
height:70px;
background:#7ED321;
}
.yellow-element {
height:100px;
background:#F8E71C;
}
.hideMobile{
display:none;
}
@media (min-width:767px) {
.main-column {
width: 70%;
float: left;
padding: 10px;
}

.sidebar-column {
float: right;
width: 30%;
padding: 10px;
}
.showMobile {
display:none;
}
.hideMobile {
display:block;
}
}

<div class="two-columns">
  <div class="main-column">
    <div class="red-element"></div>
    <div class="green-element showMobile"></div><!--only for mobile-->
    <div class="yellow-element"></div>
  </div>
  <div class="sidebar-column hideMobile"><!--hide in mobile-->
    <div class="green-element"></div>
  </div>
</div>

Adaptable, two-column design: Place one column between the other column

Answer №1

View jsFiddle Example

Answer №2

Answer №3

Answer №4

Similar questions

Mac users may experience lag when using Javascript parallax effects

Show the back button only if the user is not currently on the homepage

Using Python's BeautifulSoup library to pull information from an HTML table

The clash between mixitup and bootstrap's .active class causes confusion

The JavaScript function modifies the value stored in the local storage

Span inside button not responding to clicks

Capturing user input in HTML and passing it to JavaScript

Disabling Request.Form validation for inherited button control

Tips for aligning text in the middle of a customizable and adjustable button with the use of only Bootstrap 4

Arrange list items to consume specific width dimensions

jQuery datatables provide a powerful feature for column filtering using jQuery functions

HTML and JavaScript - Facing issues rendering HTML content during the conversion process from Markdown format

How to align scrolling images with their scroll origin - a step by step guide

HTML: Choose from a list of options by selecting multiple items from

What is the best way to implement jQuery on my website?

Trouble arises with AJAX due to DOM traversal errors

What is the best way to retrieve the file and directory tree structure from git using php?

What is the best way to monitor and record the height of a div element in a React application?

Generate a new Div dynamically, positioned higher than the rest

Is it possible to customize the appearance of ordered list numbers using javascript?