The Bootstrap grid column remains steady and does not fluctuate

Trying to get a grasp on Bootstrap 4, I've set up my page with a three-column layout and defined the following properties for each column:

Column 1: col-sm-9 col-md-8 Column 2: col-sm-3 col-md-2 order-sm-first Column 3: col-xs-12 col-md-2

My expectation was to have a two-column layout until the screen width reaches 992px, but instead, it transitions to a three-column layout at 768px.

Check out the jsfiddle link here: https://jsfiddle.net/lucasw89/f9sc02h6/

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">

    <!-- My Css -->
    <link rel="stylesheet" href="./style.css">

    <title>Hello, world!</title>
</head>

<body>

    <header class="container-fluid">
        <h1>Header</h1>
    </header>


    <div class="container-fluid">
        <div class="row">

            <section class="col-sm-9 col-md-8">
                <article>
                    <h2>Why I Went Into the Lake</h2>
                    <img src="./images/lake.jpg" />
                    <div class="row">
                        <p class="col-sm-10">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <div class="col-sm-2">
                            <input type="button" class="btn btn-primary" value="More..." />
                        </div>
                    </div>
                </article>

                <article>
                    <h2>My Name is NOT Bullwinkle</h2>
                    <img src="./images/elk.jpg" />
                    <div class="row">
                        <p class="col-sm-10">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <div class="col-sm-2">
                            <input type="button" class="btn btn-primary" value="More..." />
                        </div>
                    </div>
                </article>

                <article>
                    <h2>There's Gotta be a Penguin Up Here Somewhere</h2>
                    <img src="./images/snowboarder.jpg" />
                    <div class="row">
                        <p class="col-sm-10">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat.
                        </p>
                        <div class="col-sm-2">
                            <input type="button" class="btn btn-primary" value="More..." />
                        </div>
                    </div>
                </article>
            </section>

            <aside class="col-sm-3 col-md-2 order-sm-first">
                    <h4 class="range-title">
                        <b>Mountain Ranges</b>
                    </h4>

                    <div class="range-list">

                        <a href="wasatch-range.html">
                            <img src="./images/range-1.png" />
                            <h4>Wasatch Range</h4>
                        </a>

                        <a href="mummy-range.html">
                            <img src="./images/range-2.png" />
                            <h4>Mummy Range</h4>
                        </a>

                        <a href="front-range.html">
                            <img src="./images/range-3.png" />
                            <h4>Front Range</h4>
                        </a>

                        <a href="sawtooth-range.html">
                            <img src="./images/range-4.png" />
                            <h4>Sawtooth Range</h4>
                        </a>

                        <a href="west-elk-mountains.html">
                            <img src="./images/range-5.png" />
                            <h4>West Elk Mountains</h4>
                        </a>
                    </div>
                </aside>

            <aside class="sports-icon-list col-xs-12 col-md-2">
                <a href="downhill.html">
                    <img src="./images/icon-downhill.png" alt="Downhill" />
                    <h6>Downhill</h6>
                </a>

                <a href="snowboarding.html">
                    <img src="./images/icon-snowboard.png" alt="Snowboarding" />
                    <h6>Snowboarding</h6>
                </a>

                <a href="bobsled.html">
                    <img src="./images/icon-bobsled.png" alt="Bobsled" />
                    <h6>Bobsled</h6>
                </a>

                <a href="cross-country.html">
                    <img src="./images/icon-cross-country.png" alt="Cross Country" />
                    <h6>Cross Country</h6>
                </a>

                <a href="biathlon.html">
                    <img src="./images/icon-biathlon.png" alt="Biathlon" />
                    <h6>Biathlon</h6>
                </a>
            </aside>

        </div>
    </div>


    <footer class="container-fluid">
        <h1>Footer</h1>
    </footer>




    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
</body>

</html>

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic);

body{
    font-family: 'Open Sans', sans-serif;
}

header, footer{
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}

aside {
    background-color: #f7f7f7;
    text-align: center;
    padding-top: 40px;
}


/* The Muntain Ranges */
.range-list {
    padding-bottom: 40px;
    padding-top: 40px;
}
.range-list h4 {
    margin-bottom: 40px;
    color: darkorange;
    font-weight: bold;
}
.range-list img {
    width: 100%;
    height: 100%;
    max-width: 140px;
    max-height: 60px;
}
.range-title {
    color: darkblue;
}

/* Main Content */
article {
    padding: 40px;
}
article img {
    width: 100%;
    height: 100%;
    text-align: center;
    box-shadow: 6px 6px 8px #777;
    margin-bottom: 20px;
}
article p {
    font-size: 16px;
}


/* Sports Icons */
.sports-icon-list {
    background-color: #333;
    padding-bottom: 40px;
}
.sports-icon-list a {
    color: white;
}
.sports-icon-list a h6 {
    margin-top: 2px;
    margin-bottom: 14px;
}
.sports-icon-list img {
    width:70px;
    height:70px;
}

.sports-list-top div {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sports-list-top a {
    margin-left: 30px;
    margin-right: 30px;
    display: inline-block;
}

/* Authos Comment */
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Just as mentioned in the previous comment, .col-md-* is suitable for a viewport width greater than or equal to 768, so it seems right to me. You can refer to this link for more information.

Regarding your code, you will need to adjust the grid classes at a higher level. Additionally, to ensure that .order-* functions properly, numeric values must be used (refer to this page). Consider modifying your classes like this:

<section class="col-md-9 col-lg-8 order-md-11 order-lg-1">...</section>
<aside class="col-md-3 col-lg-2 order-md-1 order-lg-11">...</aside>
<aside class="sports-icon-list col-xs-12 col-lg-2 order-md-12 order-lg-12">...</aside>

You can view the updated version on Fiddle.

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

Utilizing CSS pseudo-elements in selectors with Scrapy

Is it possible to use the CSS text-transform property directly within Scrapy selectors? Ex: .css("::text-transform: capitalize").extract() The current method returns capitalized data, but can we apply CSS properties like text-transform to modify ...

pythoncssscrapy

The footer is displaying unusual white space beneath it

Recently, I attempted to create a sticky footer using Flexboxes and the <Grid container> Check out the code on Codesandbox However, an issue arose - there was a strange whitespace below the footer. https://i.sstatic.net/2YdaJ.png After some exper ...

htmlcssreactjsmaterial-ui

AngularJS is receiving an array of null inputs

I have a form where data from my DB is displayed through WebApi. One of the controls will contain an array of values. There is a scenario where the user can edit and save it using the PUT function. Controller : $scope.Put= function () { $scope.i ...

javascripthtmlangularjsasp.net-web-api

What could be causing the overflow of the div element within my header?

I recently embarked on a personal project to create my own portfolio website using HTML, CSS, and JavaScript. As I was working on styling the header section with bright colors for visualization purposes, I encountered an issue where the green box was overf ...

htmlcss

Exporting Canvas data without the alpha channel

I am looking for a way to resize images that are uploaded in the browser. Currently, I am utilizing canvas to draw the image and then resize it using the result from the toDataURL method. A simplified version of the code (without the upload section) looks ...

javascripthtmlcanvasimage-resizingtodataurl

Prevent anchor link click and drag functionality on an HTML page / Swipe through a container containing links

Is there a way to prevent clicking and dragging on a link in a webpage? When you click the left mouse button on a link and drag it, you can unintentionally move the link or open a new tab. I am looking for a way to disable this behavior using JavaScript o ...

javascripthtmlhyperlink

How can you achieve three layers of nested quotes in Dynamic HTML?

Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...

javascripthtmlcssonclickhtml-lists

Form tags are closing automatically on their own

Currently experiencing an issue where a form tag is mysteriously closing on its own. In the process of troubleshooting and pinpointing the root cause of this unexpected behavior. Inside the table structure due to Netsuite usage, which complicates the debu ...

jqueryhtmlcssnetsuite

Looking to create a dynamic Angular reactive form using API response data? Seeking guidance on how to achieve this? Let's

[ { "name": "jkjk", "firstName": "hgh", "lastName": "ehtrh", "replytype": "svdv", "prodCode": "svv", "execu ...

htmlangularformsdynamicangular-reactive-forms

Expanding beyond the dimensions of the webpage, HTML CSS Height set to 100% creates a unique

I'm struggling with the CSS on a page I'm working on. I have a header and main content each enclosed in div tags, with the header set to a height of 250px and the main content set to a height of 100%. I've also set the html and body heights ...

htmlcss

Displaying the age figure in JSX code with a red and bold formatting

I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below t ...

javascriptcssreactjsconditional-statementsfont-size

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

javascriptcssreactjswebpackstyled-components

Number Stepper Reverse

Could the HTML5 number stepper be reversed so that pushing down increases the number and vice versa? In Response to any 'Why?' inquiries: Consider batting order in sports like cricket or baseball. As you move down the order, your batting positio ...

htmlinput

Is utilizing fixed-top/fixed-bottom with inner div elements set to a fixed height the most effective strategy?

I am working on developing an app similar to stackoverflow, with fixed menu and footer panels and an inner div that creates browser scroll as needed. I'm wondering if the code below is correct for achieving this setup. The classes fixed-top/fixed-bot ...

htmlcssbootstrap-4fixed

Alignment of card images

Is there a way to keep the images in my cards fixed at the top of the card body? I've tried using bottom: 0 but it's not working as expected. The card body has a fixed height and is fixed to the bottom, which is functioning correctly. However, si ...

htmlcssbootstrap-4

A numeric input area that only accepts decimal numbers, with the ability to delete and use the back

I have successfully implemented a code for decimal numbers with only two digits after the decimal point. Now, I am looking to enhance the code in the following ways: Allow users to use backspace and delete keys. Create a dynamic code that does not rely o ...

javascriptjqueryhtml

Minification of CSS - Vuetify

While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is the ...

cssvue.jsvuetify.jsnuxt.js

Display the item with jQuery once the CSS generated by jQuery has finished loading

Is it possible to delay the visibility of an object until my script finishes loading? I tried using ajaxcomplete() and ajaxSuccess() without success. Check out the code snippet below for an example. There's an image with the id: imagefocus. Whenever ...

jquerycssajax

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

cssreactjstabsthemesmaterial-ui

Create a serverless PowerShell script on Azure that generates HTML content to display on a web browser

Recently, I developed a PowerShell script in Azure serverless that generates HTML content. It works perfectly fine when accessed from Firefox or Chrome as the HTML document opens in the browser. However, the issue arises when using Microsoft's browser ...

htmlazurepowershellserverless