Tips for exchanging divs in a mobile view using CSS

Question

Tips for exchanging divs in a mobile view using CSS

Illustrated below are three separate images depicting the status of my divs in desktop view, mobile view, and what I am aiming for in mobile view.

1. Current Status of Divs in Desktop View:

HTML

<div id="wrapper">
    <div id="left-nav">recent posts</div>
    <div id="main">articles listing</div>
</div>

2. Result after applying media query for mobile devices to make both divs full width.

3. This Represents My Desired Outcome:

The solution I have devised involves rearranging the position of divs in the HTML using the float property as shown below.

<div id="wrapper">
    <div id="main" style="float:right;">articles listing</div>
    <div id="left-nav" style="float:left;">recent posts</div>
</div>

This method works on mobile view after clearing floats. However, since this is within a CMS, I would prefer achieving this through CSS if possible.

Issue: When I make both divs full width in mobile view with media queries, the recent articles div appears before the article listing. How can I ensure that Articles listing comes first followed by recent posts?

javascript jquery html css

Answer 1

Answer №1

If your client has a preference for a specific browser, you have various options to consider:

For older browsers, as mentioned in this solution, you can utilize table layout to rearrange your divs:

#container   { display: table; }
#firstDiv  { display: table-row-group; }
#secondDiv { display: table-header-group; }

Alternatively, for newer browsers, you have the option of using FlexBox for specifying order:

#container { display: flex; }
#firstDiv  { order: 1; }
#secondDiv { order: 2; }

Answer 2

If your client has a preference for a specific browser, you have various options to consider:

For older browsers, as mentioned in this solution, you can utilize table layout to rearrange your divs:

#container   { display: table; }
#firstDiv  { display: table-row-group; }
#secondDiv { display: table-header-group; }

Alternatively, for newer browsers, you have the option of using FlexBox for specifying order:

#container { display: flex; }
#firstDiv  { order: 1; }
#secondDiv { order: 2; }

Tips for exchanging divs in a mobile view using CSS

Answer №1

Similar questions

Information is only displayed within the Node Request function and is not accessible to

"Implementing an Ajax request to loop through a JSON

What's the best way to organize Python objects for optimal JSON serialization?

The Django server fails to display the CSS files upon activation

Error occurs in Typescript when attempting to store data in a record using a pointer

Showing error messages on HTML forms using PHP

Simulate a failed axios get request resulting in an undefined response

CSS font attribute stylus variable

Exploring the power of ES6 map function within React stateless components

Creating a smooth image transition effect using CSS

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

Utilizing asynchronous false in Wordpress Ajax functionality

What is the process for adding the multiple attribute to a select dropdown in a form?

Applying hover effect to material-ui IconButton component

PHP is failing to send a JSON response, but no errors are being logged in the PHP error log or displayed in the

What is the method for a JavaScript program to determine if a global property name has been defined according to the ECMA-262 standard

Make sure the navigation bar is fixed to the top of the page only

Printing a modified div element that was created using jQuery on an ASP.NET MVC webpage after the initial page has finished loading

HTML5 input placeholder adapts its size and position dynamically as data is being

Measuring the quantity of 'table' elements with jQuery