Media query changing Div Background color but not its width?

Question

I already searched and tried solutions but did not work for me.

My div is,

 <div id="test" class="col-4">
            <a class="nav-link py-0" href="~/MyDevices/Index">
                <img src="~/Images/logo.png" width="75" />
                <strong class="h4 text-white">
                    Title is here for Application
                </strong>
                <span class="sr-only">(current)</span>
            </a>
        </div>

Title breaks down on small device but i manually change its div class to "col-6" it works fine. I am using media query to change col-4 to col-6 its not working but i can change div background color.

My media query is,

@media (min-width: 768px) {
    #test  {
        width: 50% !important;
        background-color: aliceblue;
    }
}

my media query is inside bootstrap.css

if i use .col in media query after #test than it does not call this media query no BG color.

How to change div width ?

hopes for you response

Answer 1

Bootstrap 4 uses flex so if you are using that you should change width to flex like this

@media (min-width: 768px) {
    #test  {
        flex: 50% !important;
        max-width: 50% !important;
        background-color: aliceblue;
    }
}

But you can use bootstrap for this by just adding col-md-6 to the element

 <div id="test" class="col-4 col-md-6">