Rearrange the first division to the second division in a responsive manner

Question

Rearrange the first division to the second division in a responsive manner

.box {
  display: block;
  width: 200px;
  height: 200px;
  padding: 20px;
  background: black;
}

.class1 {
  position: relative;
  color: red;
}

.class2 {
  position: relative;
  color: red;
}

<div class="box">

  <div class="class1">
    The First Thing
  </div>

  <div class="class2">
    The Second Thing
  </div>
  
</div>

Is there a way to reposition the "class1" div to appear after the "class2" div on tablet view without manually adjusting its position using top? Are there alternative methods for achieving this rearrangement?

javascript html css responsive-design css-position

Answer 1

Answer №1

You can utilize the order property along with media queries to control the layout.

.container {
  display: block;
  width: 200px;
  height: 200px;
  padding: 20px;
  background: black;
}

.item1 {
  position: relative;
  color: red;
}

.item2 {
  position: relative;
  color: red;
}

@media screen and (max-width: 531px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  .item2 {
    order: 1;
  }
  .item1 {
    order: 2;
  }
}

<div class="container">

  <div class="item1">
    The First Item
  </div>

  <div class="item2">
    The Second Item
  </div>

</div>

Answer 2

You can utilize the order property along with media queries to control the layout.

.container {
  display: block;
  width: 200px;
  height: 200px;
  padding: 20px;
  background: black;
}

.item1 {
  position: relative;
  color: red;
}

.item2 {
  position: relative;
  color: red;
}

@media screen and (max-width: 531px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  .item2 {
    order: 1;
  }
  .item1 {
    order: 2;
  }
}

<div class="container">

  <div class="item1">
    The First Item
  </div>

  <div class="item2">
    The Second Item
  </div>

</div>

Answer 3

Answer №2

Implementing Media Queries and flex order in CSS.

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  background: black;
  display:flex;
  flex-flow:column;
}

.class1 {
  position: relative;
  color: red;
}

.class2 {
  position: relative;
  color: red;
}

@media(max-width: 768px) {
    .class1 {
       order: 2;
    }
    .class2 {
       order: 1;
    }
}

<div class="box">

  <div class="class1">
    The First Thing
  </div>

  <div class="class2">
    The Second Thing
  </div>
  
</div>

Answer 4

Implementing Media Queries and flex order in CSS.

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  background: black;
  display:flex;
  flex-flow:column;
}

.class1 {
  position: relative;
  color: red;
}

.class2 {
  position: relative;
  color: red;
}

@media(max-width: 768px) {
    .class1 {
       order: 2;
    }
    .class2 {
       order: 1;
    }
}

<div class="box">

  <div class="class1">
    The First Thing
  </div>

  <div class="class2">
    The Second Thing
  </div>
  
</div>

Answer 5

Answer №3

Implement a grid system in your design. Utilize frameworks like Bootstrap, PrimeNG, and various others that offer this feature.

Answer 6

Implement a grid system in your design. Utilize frameworks like Bootstrap, PrimeNG, and various others that offer this feature.

Answer 7

Answer №4

For those utilizing bootstrap, achieving this effect is a breeze.

<div class="order-2 order-md-1">detail</div>
<div class="order-1 order-md-2">photo</div>

In the case of desktop display, detail will be positioned on the left side

On mobile screens, detail will be displayed at the bottom

Answer 8

For those utilizing bootstrap, achieving this effect is a breeze.

<div class="order-2 order-md-1">detail</div>
<div class="order-1 order-md-2">photo</div>

In the case of desktop display, detail will be positioned on the left side

On mobile screens, detail will be displayed at the bottom

Answer 9

Answer №5

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

@media screen and (...) {
  .container {
     flex-direction: row-reverse | column-reverse
  }
}

Answer 10

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

@media screen and (...) {
  .container {
     flex-direction: row-reverse | column-reverse
  }
}

Rearrange the first division to the second division in a responsive manner

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Having issues with the functionality of the Material UI checkbox component

Evaluating TypeError in CoffeeScript using Jasmine with Backbone.js

CSS tooltip within the document styling

Is all of the app fetched by Next.js when the initial request is sent?

Incorporate XHR into a JavaScript Function

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

The webpage appears fine on the local server, but displays incorrectly on IIS (Internet Explorer 11)

Getting the Mongoose Model using Express parameters is a simple process

Creating an art exhibit in an illuminated amp lightbox using Django

Ways to incorporate a unique debounce technique where the function is only executed every nth time

Assigning a Value to a Dropdown Menu in Angular

Parsing JSON data on the client side in an ASP.NET application

Employing async.each to execute a callback in a synchronous function within a foreach loop

What is the best way to update a value in Angular's HTML binding?

Encountering a 500 internal server error when utilizing jQuery and Ajax with Laravel 5.2

Implementing a Vue.js v-bind:style attribute onto a dynamically generated element post-page initialization

Facing issues with Handsontable opening within a jQuery UI dialog?

An issue has been encountered in the code during the installation of react.js

Tips for concealing JavaScript animations beyond specific boundaries?

The background image does not have the body padding applied