Rearrange content using media queries

Question

Rearrange content using media queries

Is it possible to rearrange the position of two HTML elements when accessing a website from a tablet?

Here is the current setup:

<section id="content"></section><!-- End section#content -->
<aside id="sidebar"></aside><!-- End aside#sidebar -->

I would like the sidebar to appear above the content section when viewing the website on a tablet, like so:

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

What is the best approach to achieve this? Can it be done with CSS alone or do I need to use Javascript, and if so, how should it be implemented?

javascript css

Answer 1

Answer №1

To achieve the desired layout, you can use CSS. Initially, float the #content and #sidebar elements, and then remove the float in tablet mode. Additionally, you can set width: 100% in tablet mode.

Check out my example on JSFiddle.

In tablet mode, structure your HTML as desired:

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

Use the following basic CSS:

#content {
    float: right;
    width: 700px;
    height: 200px;
}

#sidebar {
    float: right;
    width: 200px;
    height: 200px;
}

@media screen and (max-width: 900px) {
    #sidebar, #content {
    clear: both;
    width: 100%;
   }
}

You can also include another media query to adjust the desktop mode layout before transitioning to tablet mode with a relative width. For example, check out this alternative example.

Answer 2

To achieve the desired layout, you can use CSS. Initially, float the #content and #sidebar elements, and then remove the float in tablet mode. Additionally, you can set width: 100% in tablet mode.

Check out my example on JSFiddle.

In tablet mode, structure your HTML as desired:

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

Use the following basic CSS:

#content {
    float: right;
    width: 700px;
    height: 200px;
}

#sidebar {
    float: right;
    width: 200px;
    height: 200px;
}

@media screen and (max-width: 900px) {
    #sidebar, #content {
    clear: both;
    width: 100%;
   }
}

You can also include another media query to adjust the desktop mode layout before transitioning to tablet mode with a relative width. For example, check out this alternative example.

Answer 3

Answer №2

To accomplish this, consider using jQuery as a solution.

 $('#main-section').clone().insertAfter('#side-panel');

 //To remove the original main content element, you can use one of these methods:

  $('#main-section').eq(0).remove();

  //or

  $('#main-section:first-child').remove();

http://jsfiddle.net/abc123/

Answer 4

To accomplish this, consider using jQuery as a solution.

 $('#main-section').clone().insertAfter('#side-panel');

 //To remove the original main content element, you can use one of these methods:

  $('#main-section').eq(0).remove();

  //or

  $('#main-section:first-child').remove();

http://jsfiddle.net/abc123/

Rearrange content using media queries

Answer №1

Answer №2

Similar questions

Prevent dragging events while clicking on a link

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

Using Angular 2 to pass a function as an argument to a constructor

Arranging a Vertical Element Within a Rotated Holder

The Codepen demo for SemanticUI is not functioning properly

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

The NW JS window loaded event fails to trigger when loading a URL, but functions properly when loading from a local

What steps can I take to stop the window/body from scrolling "through" a modal div?

The Vue.js input for checkboxes and radios fails to toggle when both :checked and @input or @click are used simultaneously

Filtering nested arrays in Javascript involves iterating through each nested

Troubleshooting PHP/MySQL integration with Google Maps - issues persist

How to style large numbers with AngularJS

Ways to display and conceal menu depending on initial view and scrolling

Error: Model attribute missing in Adonis JS v5 relationship

Error occurs when page rendering is stuck in a recursive loop: Excessive re-renders detected

What is the purpose of using @ViewChild to access a component's function from another component?

How can I dynamically adjust an element's attribute as a user scrolls past it (creating a sticky effect)?

The tooltip is obscured by the table row

Automating web pages with the power of Node.js

The specified instant cannot be located in 'moment' while attempting to import {Moment} from 'moment' module