Change the positioning of the image to a new column within the bootstrap grid when a

Question

Change the positioning of the image to a new column within the bootstrap grid when a

My website utilizes Bootstrap 4, featuring a <container> with two individual columns.

For screen sizes within the Bootstrap 4 breakpoints of md-xl, these columns are displayed side by side with equal widths: col-md-6. On smaller screens like sm-xs, they stack into a single column: col-xs-12.

The goal here is to rearrange the blue img above the red img specifically on md sized screens. I've experimented with some JavaScript and Node.insertBefore(), but my preference is to achieve this using CSS in Bootstrap 4.

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

Below is an initial attempt I made with basic JavaScript - Can someone guide me in the right direction?


           function movelogo() {
                var logo = document.getElementById('logo');
                logo.insertBefore(logo, 'next_col');
            }

            window.addEventListener('resize', movelogo);


            <!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
                    <meta http-equiv="content-type" content="text/html"/>
                    <title>Title</title>
                    
                    <!-- Bootstrap CSS -->
                    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
                          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
                          
                    <!-- Font Awesome CSS -->
                    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
                          integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

                    <!-- Custom CSS -->
                    <link rel="stylesheet" type="text/css" href="css/main.css">
                 </head>
                 
                 <body>
                    <div id="about" class="container">
                        <h1 class="text-center display-3 mb-4">About</h1>
                        <div class="row justify-content-center">
                             
                            <div class="col-xs-12 col-md-6">
                                <img src="https://via.placeholder.com/300/0000FF/808080?text=Logo" class="img-fluid mb-5 mx-auto d-block" id="logo" alt="Logo">
                                     <p>Placeholder text...</p>
                                 </div>
                                 
                                 <div class="col-xs-12 col-md-6" id="next_col">
                                     <img src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image" class="mx-auto d-block img-fluid">
                                  </div>
                             </div>
                         </div>
                         
                     <!-- Optional JavaScript-->
                        <!--[jQuery first, then Popper.js, then Bootstrap JS]-->
                        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
                        
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

javascript html css twitter-bootstrap function

Answer 1

Answer №1

Learn how to utilize Media Queries with JavaScript in a simple way without altering your HTML structure. Just add an id="current_col" to your logo div.

(Check out the result below using sm-6 in the snippet)

function resize(x) {
  if (x.matches) { // If media query matches
    document.getElementById('next_col').prepend(
      document.getElementById('logo')
    );
  } else {
    if ($("#next_col").children("#logo").length > 0) {
      document.getElementById('current_col').prepend(
        document.getElementById('logo')
      );
    }
  }
}

var x = window.matchMedia("(max-width: 960px)")
resize(x) // Call listener function at run time
x.addListener(resize) // Attach listener function on state changes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
  <meta http-equiv="content-type" content="text/html" />
  <title>Title</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

  <div id="about" class="container">
    <h1 class="text-center display-3 mb-4">About</h1>
    <div class="row justify-content-center">

      <div class="col-xs-12 col-sm-6" id="current_col">

        <img src="https://via.placeholder.com/300/0000FF/808080?text=Logo" class="img-fluid mb-5 mx-auto d-block" id="logo" alt="Logo">

        <p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite
          per omnia diffuso propinqua, magnis undique praesidiis conmunitam.
        </p>

        <p> Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim
          remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
      </div>

      <div class="col-xs-12 col-sm-6" id="next_col">
        <img src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image" class="mx-auto d-block img-fluid">
      </div>
    </div>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Test it out here : https://jsfiddle.net/748sormv/

Answer 2

Learn how to utilize Media Queries with JavaScript in a simple way without altering your HTML structure. Just add an id="current_col" to your logo div.

(Check out the result below using sm-6 in the snippet)

function resize(x) {
  if (x.matches) { // If media query matches
    document.getElementById('next_col').prepend(
      document.getElementById('logo')
    );
  } else {
    if ($("#next_col").children("#logo").length > 0) {
      document.getElementById('current_col').prepend(
        document.getElementById('logo')
      );
    }
  }
}

var x = window.matchMedia("(max-width: 960px)")
resize(x) // Call listener function at run time
x.addListener(resize) // Attach listener function on state changes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
  <meta http-equiv="content-type" content="text/html" />
  <title>Title</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

  <div id="about" class="container">
    <h1 class="text-center display-3 mb-4">About</h1>
    <div class="row justify-content-center">

      <div class="col-xs-12 col-sm-6" id="current_col">

        <img src="https://via.placeholder.com/300/0000FF/808080?text=Logo" class="img-fluid mb-5 mx-auto d-block" id="logo" alt="Logo">

        <p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite
          per omnia diffuso propinqua, magnis undique praesidiis conmunitam.
        </p>

        <p> Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim
          remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
      </div>

      <div class="col-xs-12 col-sm-6" id="next_col">
        <img src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image" class="mx-auto d-block img-fluid">
      </div>
    </div>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Test it out here : https://jsfiddle.net/748sormv/

Answer 3

Answer №2

Some issues have been identified...

next_col is currently a string and not a Node.
The usage of
```
logo.insertBefore(logo, 'next_col');
```
is an attempt to insert the logo into itself before next_col, which does not exist within the logo element.

"The code below tries to relocate the logo on any screen size (the detection of the screen size can be addressed later)." 😞

This implies that each time the window resize event occurs, it will trigger the insertBefore function, potentially causing the browser to crash. A conditional test is required, as well as addressing the other identified issues....

function movelogo() {
    var logo = document.getElementById('logo');
    var next_col = document.getElementById('next_col');
    if (logo.parentNode !== next_col) {
        next_col.insertBefore(logo, next_col.childNodes[0]);
    }
}

However, utilizing Bootstrap's responsiveness eliminates the need for JS to alter the layout on xs and sm screen widths:

Answer 4

Some issues have been identified...

next_col is currently a string and not a Node.
The usage of
```
logo.insertBefore(logo, 'next_col');
```
is an attempt to insert the logo into itself before next_col, which does not exist within the logo element.

"The code below tries to relocate the logo on any screen size (the detection of the screen size can be addressed later)." 😞

This implies that each time the window resize event occurs, it will trigger the insertBefore function, potentially causing the browser to crash. A conditional test is required, as well as addressing the other identified issues....

function movelogo() {
    var logo = document.getElementById('logo');
    var next_col = document.getElementById('next_col');
    if (logo.parentNode !== next_col) {
        next_col.insertBefore(logo, next_col.childNodes[0]);
    }
}

However, utilizing Bootstrap's responsiveness eliminates the need for JS to alter the layout on xs and sm screen widths:

Answer 5

Answer №3

If you want to solve this issue, try expanding the view to full size and then resizing the window to a width below 480px to observe the outcome. I made use of a media query to address your concern. Additionally, I introduced two new enclosing divs in your HTML, namely bluecol and redcol.

The bluecol div encapsulates the blue image along with its accompanying text. Within the media query, I included float:left for the text div to ensure it aligns to the left upon resize. Initially, I had placed the text div after the image in the code, resulting in the text displaying first on larger screens. To achieve the desired result, I eliminated some of the inline Bootstrap CSS and incorporated some newly created (brief) custom classes.

I hope this explanation proves helpful.

h1 {
  text-align: center;
  padding: 10px;
}

#abouttxt {
  font-weight: normal;
  font-size: 10pt;
  line-height:1.4em;
  margin-top:12px;
  
}

#logo {
  width: 60%;
  margin: 0 20%;
}

#abouttxt,
#logo {
  display: inline-block;
}
.red {
  width: 80%;
  margin: 0 10%;
}

#bluecol,
#redcol {
  display: block;
}

@media only screen and (min-width:480px) {
  #abouttxt {
    max-width: 50%;
    float: left;
  }
  #logo {
    max-width: 40%;
    margin: 5px 10px;
  }
  #abouttxt,
  #logo {
    display: inline-block;
    vertical-align: top;
  }
  .red {
    width: 40%;
    margin-left: 52%;
  }
  #bluecol,
  #redcol {
    display: inline-block;
  }
}

<!DOCTYPE html>

<html lang="en">

... (HTML content continues here) ... </body> </html>

Answer 6

If you want to solve this issue, try expanding the view to full size and then resizing the window to a width below 480px to observe the outcome. I made use of a media query to address your concern. Additionally, I introduced two new enclosing divs in your HTML, namely bluecol and redcol.

The bluecol div encapsulates the blue image along with its accompanying text. Within the media query, I included float:left for the text div to ensure it aligns to the left upon resize. Initially, I had placed the text div after the image in the code, resulting in the text displaying first on larger screens. To achieve the desired result, I eliminated some of the inline Bootstrap CSS and incorporated some newly created (brief) custom classes.

I hope this explanation proves helpful.

h1 {
  text-align: center;
  padding: 10px;
}

#abouttxt {
  font-weight: normal;
  font-size: 10pt;
  line-height:1.4em;
  margin-top:12px;
  
}

#logo {
  width: 60%;
  margin: 0 20%;
}

#abouttxt,
#logo {
  display: inline-block;
}
.red {
  width: 80%;
  margin: 0 10%;
}

#bluecol,
#redcol {
  display: block;
}

@media only screen and (min-width:480px) {
  #abouttxt {
    max-width: 50%;
    float: left;
  }
  #logo {
    max-width: 40%;
    margin: 5px 10px;
  }
  #abouttxt,
  #logo {
    display: inline-block;
    vertical-align: top;
  }
  .red {
    width: 40%;
    margin-left: 52%;
  }
  #bluecol,
  #redcol {
    display: inline-block;
  }
}

<!DOCTYPE html>

<html lang="en">

... (HTML content continues here) ... </body> </html>

Change the positioning of the image to a new column within the bootstrap grid when a

Answer №1

Answer №2

Answer №3

Similar questions

Implementing a click event to convert text to input in Angular 5

Comparing adjust-leading-to with leader in Compass - what sets them apart?

How can I delete an individual HTML element that does not have a class or ID?

Using Vue's v-if statement to determine if a variable is either empty or null

Dealing with the response data from $http request in AngularJS

Creating an infinite scroll with a gradient background: a step-by-step guide

Getting latitude and longitude from Google Maps in a React Native appHere are the steps to

Is it feasible to utilize a Heroku Node server solely for serving basic HTML pages?

Tips for extracting only a portion of the JavaScript timestamp

Exploring the capabilities of TabrisJs in conjunction with Upnp technology

What is the proper way to utilize the JavaScript String.replace() function?

Add data to a JSON structure

Issue with displaying Git remote repository on list item element (ul) not appearing

Select dates within a range using jQuery UI datepicker

The object's texture remains static and does not follow its rotation

Convert an array comprising arrays/objects into JSON format

The Ajax call failed to connect with the matching JSON file

What is the process of using the split() method to extract specific text from a string in JavaScript?

Pass the html form data to a PHP variable

Creating a promise in an AngularJS factory function to perform an operation