CODEWITHSUNDEEP
htmlcssbootstrap-4flexbox
IvanS95
IvanS95

Reputation: 5732

Changing elements position based on device screen?

I wanted to get an idea to solve a very specific issue I'm having. I have a web page design that basically shows something like this: 

<div class="row">
    <div id="home-img" class="col-6">
    ******An Image Goes Here******
    </div>
    <div class="col-6">
        <div class="row">
            <div id="locate" class="col-12">
           ******Content Here******
            </div>
            <div id="order" class="col-12">
           ******Content Here******
            </div>
        </div>
    </div>
</div>

I'm using Bootstrap 4 to build the websites, classes above are just to kinda show how I kinda structured the design in my head, any changes to the structure are welcome so it can do what I need.

So I'm trying to think of a way to move the div with the id="locate" to be above the id="home-img" when I view the site on a phone or tablet but keep the id="order" below the id="home-image".

I can't think of a way to set up the HTML so this is easier to do. I need the whole section to be like one row on desktop, with two columns, and on the second column 2 rows again; but when on mobile devices, to have the first column be on top of the first column of the first row.

I want to display following structure on device screen.

Desktop View.

----------------------------------------
|                      |  Content Here |
|  An Image Goes Here  |----------------
|                      |  Content Here |
----------------------------------------

Mobile View

------------------------
|  Content Here        |
------------------------
|  An Image Goes Here  |
------------------------
| Content Here         |
------------------------

Upvotes: 1

Views: 1117

Answers (2)

HDP
HDP

Reputation: 4221

I think, have not possible to column move(order) from one row to another row. Here, You can try one Jugaad for that. You need to create twice id="home-image" column in both row. & then, You can hide & show it column in mobile or desktop screen as you want. please try following structure example as you want.

<div class="row">
  <div id="home-img" class="col d-none d-md-block"> ****** An Image Goes Here ****** </div>
  <div class="col">
    <div class="row">
      <div id="locate" class="col-12"> ****** Locate Content Here****** </div>
      <div id="home-img" class="col-12 d-block d-md-none"> ****** An Image Goes Here ****** </div>
      <div id="order" class="col-12"> ****** Order Content Here****** </div>
    </div>
  </div>
</div>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

You can make use of the order property inside of a media query.

The problem is that #locate is inside of a .row inside of a .col-6, and order will only apply to sibling elements. Thus, you must apply it to the .col-6 itself. Fortunately, your #home-img has higher specificity than a simple .col6, so it will override the other selector.

This can be seen in the following, where #locate comes first for mobiles, and #home-image comes first for desktops (click Run code snippet and then Full page to see the desktop view):

@media screen and (max-width: 768px) {
  .col-6 {
    order: 1;
  }
  
  #home-img {
    order: 2;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div id="home-img" class="col-6">
    home-img
  </div>
  <div class="col-6">
    <div class="row">
      <div id="locate" class="col-12">
        locate
      </div>
      <div id="order" class="col-12">
        order
      </div>
    </div>
  </div>
</div>

And note that f you want the elements to stack on mobile, you can make use of col-md-6 and col-sm-12 instead of the simple col-6 class:

@media screen and (max-width: 768px) {
  .col-6 {
    order: 1;
  }
  
  #home-img {
    order: 2;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div id="home-img" class="col-md-6 col-sm-12">
    home-img
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="row">
      <div id="locate" class="col-12">
        locate
      </div>
      <div id="order" class="col-12">
        order
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions