Using Bootstrap 4, I have a <container> that has two columns. On small or extra small screens, these collapse into one column.
I am trying to create a little script that will move the logo (in blue) into the right hand column (above the red image) on medium screens.
I've had a play around with some javascript and Node.insertBefore(), but if possible would prefer to do this using Bootrap4 CSS.
Can someone point 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>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-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>
from Move div to next col on screen resize
No comments:
Post a Comment