Is there a way to rearrange my divs in the mobile display?

Question

Is there a way to rearrange my divs in the mobile display?

Is there a way to make the image column stack below the text info column in mobile view? I've tried using flexbox without success, so any help would be greatly appreciated. Thank you!

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12">
            <img src="img/buy1.png" class="img-fluid phone1" width="300" height="auto" alt="buy icon">
        </div>

      <div class="col-lg-8 col-md-12">
        <div class="info-container">
            <div class="purchase-icon-left">
                <img src="img/buy-icon.png" class="purchase-icon" alt="buy icon">
            </div>

            <div class="text-test2">
                <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>
                  <ul>
                        <li>Discover your desired items by browsing through eight different categories.</li>
                        <li>Browse through thousands of items sold by other users. </li>
                        <li>Don't agree with the price? Message the seller and request a price deduction. </li>
                  </ul> 
            </div>

       </div>

    </div>
</div>

html css twitter-bootstrap flexbox

Answer 1

Answer №1

To change the position on the screen, use display:flex and order in your CSS code. You can adjust the order number to alter the element's placement. Additionally, make sure to include a media query for smaller screens to ensure proper responsiveness. To view the effects, check the layout on a full page and resize the window.

@media screen and (max-width: 750px) { 
    .row{
        display:flex;
        flex-direction: column;
        flex-flow: row wrap;

    }
    div.text-test2{
        background:red;
        order: 1;
    }
    .col-lg-4{
        background:green;
        order: 2;
    }

    .purchase-icon-left{
        background:blue;
        order: 3;
    }
}

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12">
            <img src="http://tineye.com/images/widgets/mona.jpg" class="img-fluid phone1" width="300" height="auto" alt="buy icon">
        </div>

      <div class="col-lg-8 col-md-12">
        <div class="info-container">
            <div class="purchase-icon-left">
                <img src="http://tineye.com/images/widgets/mona.jpg" class="purchase-icon" alt="buy icon">
            </div>

            <div class="text-test2">
                <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>
                  <ul>
                        <li>Discover your desired items by browsing through eight different categories.</li>
                        <li>Browse through thousands of items sold by other users. </li>
                        <li>Don't agree with the price? Message the seller and request a price deduction. </li>
                  </ul> 
            </div>

       </div>

    </div>
</div>

Answer 2

To change the position on the screen, use display:flex and order in your CSS code. You can adjust the order number to alter the element's placement. Additionally, make sure to include a media query for smaller screens to ensure proper responsiveness. To view the effects, check the layout on a full page and resize the window.

@media screen and (max-width: 750px) { 
    .row{
        display:flex;
        flex-direction: column;
        flex-flow: row wrap;

    }
    div.text-test2{
        background:red;
        order: 1;
    }
    .col-lg-4{
        background:green;
        order: 2;
    }

    .purchase-icon-left{
        background:blue;
        order: 3;
    }
}

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12">
            <img src="http://tineye.com/images/widgets/mona.jpg" class="img-fluid phone1" width="300" height="auto" alt="buy icon">
        </div>

      <div class="col-lg-8 col-md-12">
        <div class="info-container">
            <div class="purchase-icon-left">
                <img src="http://tineye.com/images/widgets/mona.jpg" class="purchase-icon" alt="buy icon">
            </div>

            <div class="text-test2">
                <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>
                  <ul>
                        <li>Discover your desired items by browsing through eight different categories.</li>
                        <li>Browse through thousands of items sold by other users. </li>
                        <li>Don't agree with the price? Message the seller and request a price deduction. </li>
                  </ul> 
            </div>

       </div>

    </div>
</div>

Answer 3

Answer №2

Take a look at the following code snippet.

Initially, the image appears above the text, but when the width drops below 400px, it shifts below the text. This functionality is achieved through the use of two classes: .computer-only and .mobile-only, which are specified in the CSS with a @media query.

.mobile-only {
  display: none;
}

@media (max-width: 400px) {

  .mobile-only {
    display: block;
  }

  .computer-only {
    display: none;
}
  
}

<img class="computer-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">

Welcome to stackoverflow!

<img class="mobile-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">

To implement this feature in your project, simply add the provided CSS styles to your stylesheet. You can then assign the two classes to any elements as needed.

Don't forget to adjust the value of 400px to suit your specific breakpoint for switching between mobile and desktop views!

Answer 4

Take a look at the following code snippet.

Initially, the image appears above the text, but when the width drops below 400px, it shifts below the text. This functionality is achieved through the use of two classes: .computer-only and .mobile-only, which are specified in the CSS with a @media query.

.mobile-only {
  display: none;
}

@media (max-width: 400px) {

  .mobile-only {
    display: block;
  }

  .computer-only {
    display: none;
}
  
}

<img class="computer-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">

Welcome to stackoverflow!

<img class="mobile-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">

To implement this feature in your project, simply add the provided CSS styles to your stylesheet. You can then assign the two classes to any elements as needed.

Don't forget to adjust the value of 400px to suit your specific breakpoint for switching between mobile and desktop views!

Is there a way to rearrange my divs in the mobile display?

Answer №1

Answer №2

Similar questions

How do I simulate a checkbox click with jQuery based on the text included in its ID?

Why isn't the document.getElementById().value() function functioning properly within my PHP code?

Tips for customizing text color in a disabled MUI TextField?

How to vertically align text and image in QML Text by utilizing HTML tags with specified height and width dimensions

The show-word-limit feature is malfunctioning on the element.eleme.io platform

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Is there a simple way to create a clickable popup menu without using JavaScript?

When an option is selected in one dropdown, a list is dynamically populated in another dropdown. However, the entire column then displays the selected row's options in a table format

Exploring the Differences in CSS Styling between Web and Mobile Platforms

Ways to adjust the ngx-pagination color scheme?

Using JavaScript to convert the text within a div into negative HTML code

django url not returning any data

Example of AngularJS UI-Router Login Feature

Hide the cursor when the text box is in focus

What is preventing me from using jQuery to dynamically insert HTML onto the page?

Utilizing ellipses within a list item to create a visually appealing design

Animating Font Awesome content through CSS transitions

What is the best way to blend a portion of an image into a div?

Sneaky spam and ads embedded within Joomla template

When working with a barcode font in Chrome, using style.fontFamily may not be effective, but utilizing className can achieve the desired result