Is it possible to rearrange elements that reside within different parent elements?

Question

Is it possible to rearrange elements that reside within different parent elements?

I have a section on my website that I need to re-order for mobile devices. Currently, it looks one way on desktop and another way on mobile. Here's what I'm trying to achieve:

On desktop:

https://i.sstatic.net/w3lXh.png

On mobile:

https://i.sstatic.net/TVqlY.png

I've been working on this using JSFiddle. You can see a live demo here.

@media only screen and (max-width: 480px) {
  .flex-item1 {
    order: 1;
  }
  .flex-item2 {
    order: 3;
  }
  .flex-item3 {
    order: 2;
  }
}

<section id="main-content">
  <div class="container">
    <div class="row" id="top-content">
      <div class="col-lg-4" id="left-content">

        <h1 class="flex-item1"></h1>
        <div class="card-custom flex-item2">
        </div>

      </div>
      <div class="col-lg-8" id="right-content">
        <div class="flex-item3" canplay id="video-block">
        </div>
      </div>
    </div>
  </div>

</section>

Can someone help me figure out what I'm doing wrong?

html css twitter-bootstrap bootstrap-4 flexbox

Answer 1

Answer №1

You should consider utilizing CSS Grid for your layout. I experimented with a helpful Grid Generator tool that can assist you in creating the desired grid structure. It is recommended to view the output in full screen mode for better clarity.

Please Note: If there are any opportunities to simplify this code, feel free to optimize it as I am relatively new to working with CSS Grid.

Check out the JSfiddle Demo here

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 500px;
}

.div1 {
  grid-area: 1 / 1 / 3 / 3;
  background: #00A2E8;
}

.div2 {
  grid-area: 3 / 1 / 5 / 3;
  background: #22b14c;
}

.div3 {
  grid-area: 1 / 3 / 5 / 5;
  background: #ED1C24;
}

@media ( max-width: 600px) {
  .div1 {
    grid-area: 1 / 1 / 2 / 5;
  }
  .div2 {
    grid-area: 4 / 1 / 5 / 5;
  }
  .div3 {
    grid-area: 2 / 1 / 4 / 5;
  }
}


/* Additional styles */

.container>div {
  color: #fff;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

Answer 2

You should consider utilizing CSS Grid for your layout. I experimented with a helpful Grid Generator tool that can assist you in creating the desired grid structure. It is recommended to view the output in full screen mode for better clarity.

Please Note: If there are any opportunities to simplify this code, feel free to optimize it as I am relatively new to working with CSS Grid.

Check out the JSfiddle Demo here

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 500px;
}

.div1 {
  grid-area: 1 / 1 / 3 / 3;
  background: #00A2E8;
}

.div2 {
  grid-area: 3 / 1 / 5 / 3;
  background: #22b14c;
}

.div3 {
  grid-area: 1 / 3 / 5 / 5;
  background: #ED1C24;
}

@media ( max-width: 600px) {
  .div1 {
    grid-area: 1 / 1 / 2 / 5;
  }
  .div2 {
    grid-area: 4 / 1 / 5 / 5;
  }
  .div3 {
    grid-area: 2 / 1 / 4 / 5;
  }
}


/* Additional styles */

.container>div {
  color: #fff;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

Answer 3

Answer №2

My approach was to use the table tag instead of flexbox.

Feel free to give it a try and see if it works for you.

.flex-item1 {
  background: skyblue;
  width;
  150px;
  height: 100px;
}

.flex-item2 {
  width: 150px;
  height: 100px;
  background: green
}

.flex-item3 {
  width: 300px;
  height: 400px;
  background: red;
}

@media only screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  .flex-item1,
  .flex-item2,
  .flex-item3 {
    display: block;
    width: 100%;
  }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<section id="main-content">
  <div class="container">
    <div class="row" id="top-content">
      <table>
        <tr>
          <th class="flex-item1">1</th>
          <th rowspan="2" class="flex-item3">3</th>
        </tr>
        <tr>
          <td class="flex-item2">2</td>
        </tr>
      </table>
    </div>
  </div>

</section>

Answer 4

My approach was to use the table tag instead of flexbox.

Feel free to give it a try and see if it works for you.

.flex-item1 {
  background: skyblue;
  width;
  150px;
  height: 100px;
}

.flex-item2 {
  width: 150px;
  height: 100px;
  background: green
}

.flex-item3 {
  width: 300px;
  height: 400px;
  background: red;
}

@media only screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  .flex-item1,
  .flex-item2,
  .flex-item3 {
    display: block;
    width: 100%;
  }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<section id="main-content">
  <div class="container">
    <div class="row" id="top-content">
      <table>
        <tr>
          <th class="flex-item1">1</th>
          <th rowspan="2" class="flex-item3">3</th>
        </tr>
        <tr>
          <td class="flex-item2">2</td>
        </tr>
      </table>
    </div>
  </div>

</section>

Answer 5

Answer №3

For optimal viewing on mobile devices, utilize col-xs-12.

<section id="main-content">
           `enter code here`<div class="container">
                <div class="row" id="top-content">
                    <div class="col-md-4 col-xs-12" id="left-content">
                        <div class="row col-md-12>
                             <h1 class="flex-item1"></h1>
                        </div>
                        <div class="row col-md-12>
                             <h1 class="flex-item2"></h1>
                        </div>
                    </div>
                    <div class="col-md-8 col-xs-12" id="right-content">
                            <div class="flex-item3" canplay id="video-block">
                            </div>
                    </div>
                </div>
        </div>

</section>

CSS Styling:

@media only screen and (max-width: 480px) {
.flex-item1 {
    order: 1; 
   }
.flex-item2{
    order: 3;
}
.flex-item3{ 
  order: 2; 
}
}

Answer 6

For optimal viewing on mobile devices, utilize col-xs-12.

<section id="main-content">
           `enter code here`<div class="container">
                <div class="row" id="top-content">
                    <div class="col-md-4 col-xs-12" id="left-content">
                        <div class="row col-md-12>
                             <h1 class="flex-item1"></h1>
                        </div>
                        <div class="row col-md-12>
                             <h1 class="flex-item2"></h1>
                        </div>
                    </div>
                    <div class="col-md-8 col-xs-12" id="right-content">
                            <div class="flex-item3" canplay id="video-block">
                            </div>
                    </div>
                </div>
        </div>

</section>

CSS Styling:

@media only screen and (max-width: 480px) {
.flex-item1 {
    order: 1; 
   }
.flex-item2{
    order: 3;
}
.flex-item3{ 
  order: 2; 
}
}

Is it possible to rearrange elements that reside within different parent elements?

Answer №1

Answer №2

Answer №3

Similar questions

Separate a string into substrings based on the number of spaces it contains

How can I prioritize my own stylesheet over Bootstrap in a React project where it is included in the index.js file?

JavaScript and the importance of using commas in arrays

Form Submission in C# Triggered by Empty Required HTML5 Fields

Failure to Present Outcome on Screen

Utilizing CSS nested spans and setting custom width attributes

Tips for avoiding word fragmentation in <pre> code blocks

Is there a way to import an image from a different webpage using HTML?

Enhance the numerical value displayed in jQuery UI tooltips

Adding a command to open a new browser tab using JavaScript code can easily be accomplished by following these steps. By using Terminal, you can quickly and efficiently implement this feature

Tips for making a div overlap with Twitter Bootstrap positioning

How about creating a responsive layout using only CSS3 for dynamic width adjustments?

Ensure that the child div fills the entire parent area when resizing the page

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

What is the best way to assign the "active" class to a navigation list item using JavaScript within Bootstrap 4?

Displaying modal popups limited to one per session

What is the method for utilizing alpha transparency in MPDF?

Argument for setInterval function

Using a jQuery UI dialog for multiple checkbox selection. The post array cannot be saved for a multi-select until the dialog is opened

A step-by-step guide on retrieving <input> values from an HTML form with PHP and saving them to a text file