The items in column 2 are unexpectedly switching positions when viewed on mobile, which is not intended

Whenever I toggle a switch, certain sections are displayed on the screen. However, when I activate this switch, the column layout suddenly changes to look like the mobile view, with two images stacked vertically instead of side by side. I'm using col-md-6 for each column to occupy 50% of the row in the browser view. Everything seems fine until I toggle the switch, and then they stack one below the other.

https://i.sstatic.net/ejBA7.jpg

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

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

function showContent() {
    var studyContent = document.getElementById("study-content");
    var privateContent = document.getElementById("private-content");
    var switchInput = document.getElementById("switch");
  
    if (switchInput.checked) {
      studyContent.style.display = "block";
      privateContent.style.display = "none";
    } else {
      studyContent.style.display = "none";
      privateContent.style.display = "block";
    }
  }

  /* Other JavaScript functions here */

htmlcssbootstrap-4

Answer â„–1

If you're encountering a stacking issue with the children elements in your JavaScript code, it may be due to using display: block instead of display: flex. Here's an updated version of the code that should address this problem:

function showContent() {
    var studyContent = document.getElementById("study-content");
    var privateContent = document.getElementById("private-content");
    var switchInput = document.getElementById("switch");
  
    if (switchInput.checked) {
      studyContent.style.display = "flex";
      privateContent.style.display = "none";
    } else {
      studyContent.style.display = "none";
      privateContent.style.display = "flex";
    }
  }

  window.onscroll = function() {
    scrollFunction();
  };
  
  function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      document.querySelector('.scroll-to-top-btn').style.display = 'block';
    } else {
      document.querySelector('.scroll-to-top-btn').style.display = 'none';
    }
  }

  function scrollToElement() {
    document.getElementById('nav').scrollIntoView({ 
      behavior: 'smooth' 
    });
  }

  function downloadPDF() {
    window.open('C:\\Users\\miche\\Desktop\\Medieninformatik\\portfolio\\Lebenslauf.pdf', '_blank');
  }
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/unbounded/v3/Yq6F-LOTXCb04q32xlpat-6uR42XTqtG6xjx44rNgQ.woff2) format('woff2');...
<!DOCTYPE html>
<html lang="en">
...
                    Copyright &copy; 2022 Michelle Kaufmann
                  </div>
                </div>
                <div class="col-md-6 text-center text-md-end">
                  <div class="links">
                    <a href="impressum.html">Impressum</a>
                  </div>
                </div>
              </div>
            </footer>
    </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3eff3ee">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</html>

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

Revolutionizing the Industry: Discover the Power of Dynamic Models, Stores, and Views for

As a newcomer to EXT JS, I am exploring the use of MVC in my projects. Consider a scenario where I have a web service with a flexible data model. I would like to dynamically create models, stores, and components based on the data from these stores. Let&a ...

javascriptjqueryhtmlcssextjs

Getting 100% height on floated neighboring divs: Tips and tricks

​<div id='container'> <div class='left'></div> <div class='right'></div> <div class='clear'></div> </div>​​​​​​​​​​​​​​​​â ...

htmlcss

Is it feasible to embed Instagram in an iframe without using the API?

Is there an alternative method to embed Instagram using iframe without the need for an API? ...

javascripthtmlcss

disable input box stationary

Is there a way to make a checkbox stay disabled even after refreshing the page? Currently, when I click the checkbox it disables, but upon refreshing the page, it goes back to being enabled. $( "input[type='checkbox']").click(function(event){ ...

javascriptjqueryhtml

Issue duplicating DIV elements using jQuery's clone() method causes button duplication error

Just starting out with programming, so my code might not be perfect. I'm encountering an issue when I click a button in the HTML (Fiddle) $(document).ready(function() { $("button").click(function() { $(".groupcontainer").clone().appendTo(".grou ...

javascriptjqueryhtmlclone

What is the best way to ensure that my top menu remains fixed while scrolling?

Link to website: I am looking to have the top menu on my page remain fixed at the top of the screen as users scroll. Does anyone know if this is achievable, and if so, how can I implement it? ...

javascripthtmlcsstwitter-bootstrap

Can a single div have three different border-bottom styles?

Can three border-bottom styles be applied to a single div element? This is the desired appearance: ...

css

Illuminate a group of items when hovering over them

While attempting to change the color of 1 to 5 elements on mouse hover based on the data-rating tag, I am encountering a few issues. The data is retrieved correctly, but there are some problems: The function is being called 5 times each time there is a ho ...

javascripthtmljquerycss

Ways to Customize the Text Color in the Navigation Bar

Is there a way to change the color of text in my navigation bar to #b3b3b3? It seems like I am limited to the colors provided by bootstrap. How can I work around this limitation? <nav class="navbar" style="color: #b3b3b3; background-col ...

htmlcssbootstrap-5

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

jqueryhtmlcsstwitter-bootstrap

My AngularJs code seems to be throwing some errors

I recently started learning Angularjs and here is the code I have written: <!DOCTYPE html> <html> <head> <title>ng-Messages Service</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery ...

htmlangularjsmodel-view-controller

Change URL link after login user with javascript

Is there a way to generate a URL link based on the user's name (gmail)? For example: The code below is somewhat suitable for my needs. However, I am trying to figure out how to automatically retrieve the username and populate it in the input field. ...

javascriptjqueryhtmlhyperlink

Troubleshooting: Issues with window.location.href and window.open within an iframe

Code Update <div> <button type="button" class="submit btn btn-default" id="btnSubmit">Submit </button> <button type="button">Cancel</button> </div> <script> $("#btnSubmit").click(function(e) { ...

javascriptjqueryangularjsajaxhtml

Retrieve user input from an HTML form and pass it as a parameter in a jQuery AJAX request

Is there a way to pass a value from a user input in an HTML file to jQuery.ajax? Take a look at the code snippet from my JS file: jQuery(document).ready(function() { jQuery.ajax({ type: 'POST', url: 'myurl.asp ...

javascriptjqueryhtmlajax

Ways to adjust the font size of mat-menu-item?

I came across a query regarding this matter on another platform: How can the font size of mat-menu-item be changed to small in Angular? Unfortunately, the solution provided did not work for me. I attempted to implement the suggested code in my Angular a ...

cssangular

The radio button default selection is checked, but the desired styles are not being applied

My webpage features two radio buttons, "No" and "Yes," with the default selection being "No." I have implemented CSS styles for the checked elements, but they only work once physically selected. My goal is to apply these styles immediately on page load wit ...

htmlcssradio-button

What is the best way to include an icon in a Vue child component?

Struggling to implement the image in the template using both the img tag and as a background. Despite having the correct path to the icon, neither method seems to work. Check out the code snippet here <div> <a href="#" class="icon" > ...

cssvue.jsimportsassvuejs2

Add an event listener to a specific class in order to control the visibility of its child elements by

Whenever I click on the "title text" link, the <ol> element refuses to hide, despite my efforts. After thoroughly reviewing the jQuery documentation and scouring Stack Overflow for answers related to .click(), .children(), .toggle(), and .hide(), I a ...

javascriptjqueryhtml

I don't want my background image to repeat, but I'm not sure how to stretch out the tile

Hey there, I would appreciate it if you could refrain from criticizing me or giving me negative feedback as I have put in the effort to search for an answer. After extensive research, this is what I have found so far. My goal is to set a background image f ...

htmlcss

What is the method for determining the length of a string in JavaScript?

I'm in the process of developing a calculator that can compute the values within a string. To achieve this, I've implemented a Function object, but upon execution of the code, I encounter an issue where I receive a result of 'undefined' ...

javascripthtmlcss