Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS Switching column order for mobile display

D

DV1

New Coder
Hi to everyone.

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.

Note: I didn't place a link to a page to show the visual aspect since I'm not sure if you're allowed to do that here.

Here is the code:

Code: 
<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>
 
Sort by date Sort by votes
Hey and welcome to the family,

You could do this

Code: 
@media only screen and (max-width: 480px) {
.left { float:left}
.right { float:right}
}

@media only screen and (min-width: 480px) {
.left { float:right}
.right { float:left}
}

So what I have done here is simply tell it that if the screen is under 480px then float left but if it is over 480px then float right. Now as long as you do not tell the .left or .right to flow out side of the @media cons then this should work 😀
 
Upvote 0 Downvote
Simon

Thank you, it seems to be working.

I had to do a few things to achieve this and I figured I'd note them and get your feedback.

The first was switch the percentages in .left and .right. This is because the columns are unequal with the left being wider than the right. When I tried your suggestion it switched this and so the switching of percentages.

I also noticed at first that I didn't include the 'width: 100%' in the media query but when I did it was okay.

Now, to the best of my understanding the method you provide is better than the 'flex' method? I put that as a question because with flex and the relatively new 'CSS Grid Layout' it seems they are more restricted in terms of browser displays e.g., IE 10, etc., but supposedly they're easier.

Lastly, because it is a simple 2 column arrangement is it safe to say that in situations where more columns are needed then a more elaborate grid system is required? If so, is there one that you'd recommend above others that would be the simplest? Personally, I don't see myself needing multiple columns for what I do, but as with HTML and CSS in the years I've been playing around with them I always pared and streamlined what I could without the bells and whistles introduced by whomever along the way. So, I guess I'm looking for the simplest grid to have at the ready.


Again, thanks for the help.

Daniel
 
Upvote 0 Downvote
Hey Daniel,

so im glad it helped, with my method, it is more used for if something is changing all the time then I would only use the CSS inside of the media tags but if something doesn't depend on size then I would use it outside of the tags. That would be why your width was not working 😀

Honestly, you have just taught me something new, I have never heard of flex. see personally I use bootstrap for everything like this. Im not to sure if it could do what you are asking but it pretty much covers everything mobile and responsive for me 😀

I would say look into bootstrap and make your life a whole lot easier, its a simple css sheet bassicly that helps you to build responsive sites. i have made a easy tutorial dipping yours toes in at https://codeforum.org/resources/the-basic-bootstrap.38/

i hope i have answered all of your questions 😀
 
Upvote 0 Downvote
Simon

Well, I started working around with flex and it seems there are some things you can do with it. I rearranged the code in some places and the column thing works well. But I encountered a bit of a glitch when using an image in column 2. Apparently, the column is not like a container. To illustrate this, check out the link for a demo. My notes are there on the page explaining the problem. Maybe your bootstrap knowledge knows what's going on with this.


Daniel
 
Upvote 0 Downvote
Simon

I found a solution. Click here for new demo: Flex Test Page.

I'm going to have to study and experiment a bit more with flex but for now I at least know how to use it for 2 columns. 🙂

Below is the flex code that was needed; the first two, asterisk and .box solved it. And I can even leave the same image since it scales well. The rest of the code is same as before:

Code: 
<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>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom