Switching column order for mobile display

Forum Moderators: not2easy

Message Too Old, No Replies

Switching column order for mobile display

DanV1

6:26 pm on Nov 11, 2020 (gmt 0)

Hi to everyone. First time here.

I found a very simple bit of code to make two columns. What I'm trying to do is make 'Column 2' be first instead of second when it goes mobile-display at 480px.

I did this years ago with another grid system but I figure there has to be a briefer solution.

Thank You
Daniel

[edited by: not2easy at 7:24 pm (utc) on Nov 11, 2020]
[edit reason] no links please [/edit]

not2easy

7:32 pm on Nov 11, 2020 (gmt 0)

Hi DanV1 and Welcome to WebmasterWorld [webmasterworld.com]

Sorry for the edit there, but rather than visit your site to help, we ask that you share the relevant information here so that others can help you find a solution. We prefer to educate webmasters to make their own judgements, rather than discuss specifics of any site.

The relevant CSS and HTML code can be shared here while maintaining your privacy. That Welcome link (new tab) offers tips on formatting your posts and generally using the forums. The Charter [webmasterworld.com] has more information about sharing code.

We're here to help each other do better ;)

If you are in need of a site review please consider subscribing to WebmasterWorld. The Site Review Forum is here: [webmasterworld.com...]

DanV1

8:05 pm on Nov 11, 2020 (gmt 0)

@not2easy

No problem, I wasn't aware of the website linking issue. I provided the link for the visual aspect.

Here is just the code:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Switching column order for mobile display</title>

<style>

* {
box-sizing: border-box; 
}

/* Create two unequal columns that float next to each other */
.column {
 float: left;
 padding: 10px;
 height: 300px; /* Should be removed. Only for demonstration */
}

.left {
 width: 62%;
}

.right {
 width: 38%;
}

/* Clear floats after the columns */
.row:after {
 content: "";
 display: table;
 clear: both;
}

/* go full width at 480px */

@media only screen and (max-width: 480px) {
.left { width:100%}
.right { width:100%}
.column{ clear:both}
}

</style>
</head>

<body>

<h2>Two Unequal Columns</h2>

<div class="row">
 <div class="column left" style="background-color:#aaa;">
 <h2>Column 1</h2>
 <p>Some text..</p>
 </div>
 <div class="column right" style="background-color:#bbb;">
 <h2>Column 2</h2>
 <p>Some text..</p>
 </div>
</div>

</body>
</html>

NickMNS

8:17 pm on Nov 11, 2020 (gmt 0)

If you use Display:flex on the parent of the 2 columns, then using a media query, you can set flex-direction: row-reverse, which will reverse to order of the elements in the parent node.

NickMNS

1:11 am on Nov 12, 2020 (gmt 0)

For completeness:


.column {
 padding: 10px;
 height: 300px; /* Should be removed. Only for demonstration */
}
.row{
  display:flex;
  flex-direction: row-reverse;
}

@media (min-width: 480px) {
 .row {
  flex-direction: row-reverse;
 }
}

Here is a demo: [jsfiddle.net...]

I noticed that in your posted code that you set the width of both .right and .left to 100%, why? Do you want the column to be stacked, with column 2 on top of column 1?
here is that demo: [jsfiddle.net...]

DanV1

3:08 pm on Nov 12, 2020 (gmt 0)

Nick

Thank you for the response.

Something that I noticed was that in my original post I said 'first' and 'second' when in fact I meant top and bottom. Please excuse that but even so the information you've given is good and now I know what to do in case I need a horizontal change of columns.

I know that if I want to change it top-bottom it requires width to be 100% in the @media query. I tried that with the flex method but did not get the result. Is there something different that needs to be done with flex for the top-bottom? By the way, I mean top 2nd column, bottom 1st column, so it's still a reverse but vertical for 480px.

=====Update: Just noticed that you caught on to that about top-bottom with the new fiddle. Thanks. :-) =====

Lastly, having read a bit about flex it says that some older browsers don't show it. Is that really an issue to worry about? I've always coded things so they can be seen on most browsers so that's why I ask.

Daniel

not2easy

4:07 pm on Nov 12, 2020 (gmt 0)

Flex sizing is supported in all modern browsers. It is good to try to code for most browsers, but if anyone is still using Chrome 28, they must expect to have such issues I think. Flex is fine with Safari 10+ (14 is current), FireFox 22 (82 is current), IE 11 and Opera 48 and up. I wouldn't worry too much about browsers parsing flex.

https://www.w3schools.com/css/css3_flexbox.asp lists the browser limitations.

DanV1

3:05 pm on Nov 15, 2020 (gmt 0)

I found a solution. Using the first items in the code, asterisk* and .box made everything line up well.

If you still have link for the page you can see it there.


<style>

* { box-sizing: border-box;}

.box {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
 }

/* Create two unequal columns that float next to each other */

.column {padding: 10px;}

.row{
 display:flex;
 flex-direction: column-reverse;
}

.left {width: 100%;}
.right {width: 100%;}

p { font-size: 1.3em; font-weight:bold}

@media (min-width: 480px) {
.row {flex-direction: row;}
.left {width: 62%;}
.right {width: 38%;}

}

</style>