Adjusting the placement of elements according to the size of the screen?

I'm facing a very specific issue with my web page design and I need some ideas on how to solve it. The current structure of the page looks 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>

Using Bootstrap 4 for website development, the classes above represent the current structure in mind. Open to suggestions on how to reorganize the layout to address my requirements.

The goal is to move the id="locate" div above the id="home-img" when viewing the site on mobile devices, while keeping the id="order" below the id="home-image".

Struggling to find an efficient HTML setup that facilitates this transition. Need the section to act as one row with two columns on desktop, the second column breaking down into two rows; on smaller screens, the first column should shift above the first row in column 1.

The desired display structure based on device screen size:

Desktop View.

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

Mobile View

------------------------
|  Content Here        |
------------------------
|  An Image Goes Here  |
------------------------
| Content Here         |
------------------------
htmlcssbootstrap-4flexbox

Answer №1

Utilize the order property within a media query.

The issue lies in the fact that #locate is nested inside a .row which is nested inside a .col-6, and the order property only applies to sibling elements. Therefore, it must be applied to the .col-6 itself. Luckily, your #home-img has higher specificity than a simple .col6, allowing it to override the other selector.

This is demonstrated below, where #locate takes precedence for mobile devices, while #home-image takes precedence for desktops (click on Run code snippet and then Full page to view the desktop layout):

@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>

Furthermore, if you wish to stack the elements on mobile, consider using col-md-6 and col-sm-12 instead of just the 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>

Answer №2

In my opinion, it is not possible to move a column from one row to another row. However, there is a workaround for this issue. You can create two id="home-image" columns in both rows and then toggle their visibility based on the screen size (mobile or desktop). Here is an example structure for you to try:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Link not functioning correctly on mobile-responsive CSS

Having some trouble with hyperlinks over a background image. The hyperlinks work fine normally, but in mobile view, nothing happens when clicking on them. Below is the code for the hyperlinks. You can also visit the site and see that the "Post a Project" ...

htmlcssbootstrap-4

Trouble displaying images from JSON file in AngularJS using ng-src - need help with image loading

While utilizing AngularJS to extract image data from a JSON file, everything seems to work fine for other types of data except images. Why is the ng-src not retrieving any images? I am attempting to load all the images into the div and set the src, alt, a ...

htmlangularjsjson

What steps can I take to set a default value for a select tag if the option value is not a specific value?

<select name="corequisite"> <option value="" selected="selected">No Corequisite</option>'; $res = mysqli_query("SELECT * FROM course"); while($row = mysqli_fetch_array($res)){ echo'<option value="'.$row['Code&ap ...

phphtmlmysql

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

javascripthtmlcssmenusticky

Updating the Navigation Bar and Theme in CRM Dynamics 2013 to Reflect Your Organization's Branding

In my CRM Dynamics 2013 setup, I am faced with a unique challenge. I need to customize the Organization navigation bar based on which organization is currently loaded. Specifically, I have two organizations - QA and PROD. When a user switches to the QA org ...

javascriptcssdynamics-crm-2013

Scrubbing the htaccess file for custom redirect rules in cPanel

I am looking to optimize my .htaccess file for the following purposes: Removing the .html extension Redirecting non-www URLs to www Forcing HTTP to HTTPS Changing .com/index.html to .com/ Implementing all redirects through cPanel's 'Redirects&a ...

html.htaccesshostingcpanel

displaying a video within an iframe without occupying the entire screen

After successfully implementing a fullscreen video background using the "video" tag with a video hosted on my own server, I decided to switch it out for a Vimeo video. However, after making the necessary code and CSS changes, the video now appears like thi ...

htmlcssbootstrap-5embed

Centering items in Material UI Grid

I'm currently grappling with understanding Material UI's grid system and implementing it in React.js, and I find it a bit perplexing. My goal is to center the spinner loader and text irrespective of viewport size. While I can manage to place the ...

cssreactjsmaterial-uicentering

Is it possible for me to convert the contents of a <div> into a rasterized image when printing?

I have been using jquery.printElement.js to print a custom calendar table that I created. The functionality inside a div is mostly working as expected, but I am facing some challenges with the CSS. Despite passing along all necessary .css files, my cells a ...

jqueryhtmlcssprintingrasterizing

populating all available space in layouts using bootstrap columns

I am attempting to create a grid layout using bootstrap, but I am facing an issue with positioning one of the columns. I have tried adjusting the placement of the divs and using offsets/pulls, but so far I have not been successful. To explain what I am a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Select a dropdown menu option in Cypress by clicking on it only if it is checked

In this html code snippet, I have multiple elements within a dropdown menu. I am looking for a way to click on an item only if it is selected (has the class selected) or has a check mark in front of the name, as shown in this screenshot. How can I achieve ...

javascripthtmlautomationcypress

The anchor for the circular image is oversized

Currently, I have a PHP code that displays a user's profile picture, and when clicked, it takes them to their own profile. The image is displayed correctly, and the link works fine. However, there seems to be an issue with the area covered by the anch ...

cssimagebackgroundanchor

Enhancing the styling of checkboxes using CSS and Javascript

My Javascript skills have been put to the test with a simple code snippet that customizes checkboxes by hiding them and using background images in CSS to display checks and unchecks. It's a neat trick, but I'm wondering if it's HTML/CSS comp ...

htmlcsscheckboxaccessibility

Tips on organizing elements

Here are three elements: <!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.boo ...

htmlcsstwitter-bootstrap-3

Wagtail Django TableBlock not showing up properly on the webpage

Recently delving into the world of Django and programming, I decided to incorporate Wagtail into my website. However, I've encountered a roadblock with the 'TableBlock' functionality Despite setting up the model and block correctly, I&apos ...

pythonhtmldjangowagtail

What is the Best Way to Ask Users Not to Delete Local Storage Information?

As I work on developing an application using angularJS, the need to save data locally has arisen. To achieve this, I am utilizing HTML5 local storage. One challenge faced with HTML5 local storage is that when a user clears their browsing data, all stored ...

javascriptangularjshtmllocal-storageindexeddb

Interpret currency symbols as text

I'm currently dealing with a website that has a structure similar to this (Minimal Reproducible Example): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&q ...

htmlmathjax

What is the correct way to link an image path to my PHP script?

I am currently working on a project as a student where we created a MySQL database named Video_Game_Shop. Our task is to connect this database to a website using PHP and HTML, and display all the games listed in our database on one page. To achieve this, ...

phphtmlmysql

Retrieve the text content of a datalist option by accessing the label with jQuery

Utilizing data from a Json, I am populating a data-list in html. The options are added to the data-list with both value and label text. Upon clicking an option, I aim to insert both the value and text into a form text field. While accessing the option&apo ...

javascriptjqueryhtmljsonhtml-datalist

Remain concealed once the lights dim

Looking for a way to fade out a logo in a preloader div after a call, but having issues with it becoming visible again once fully faded out. Ideally, I would like to keep it faded out or set it to display none using only CSS, although I can use jQuery if n ...

jquerycss