HTML/CSS/Javascript: How do I make it so .col-sm can replace @media query

-1

I have this code here so that it displays each image side by side (left to right), but I want to make it so that when it is in mobile version (max-width: 480px) that it displays the pictures in 2-columns (so 2 rows). Instead of using @media query, I was wondering how can I do it via .col-sm?
I have PICTURE PICTURE PICTURE and I want to change the format to when it is in mobile display to:

PICTURE PICTURE

PICTURE

<div class="col-9">

                <div class="card-group">

                    <div class="card">

                        <img class="card-img-top" src="carrots.jpg" alt="Card image cap">

                        </div>

                        <div class="card">

                            <img class="card-img-top" src="beets.jpg" alt="Card image cap">

                            </div>

                            <div class="card">

                                <img class="card-img-top" src="asparagus.jpg" alt="Card image cap">

                                </div>

                            </div>

I apologize if the question is very vague. I'm still new and learning about bootstrap

edited Nov 25 '18 at 13:43

asked Nov 25 '18 at 2:31

Michael Kheong

958

The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.

– user3277192
Nov 25 '18 at 2:36

I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S

– Michael Kheong
Nov 25 '18 at 2:43

<div class=".col-9"> - I don't think you want the period on the class name

– user2182349
Nov 25 '18 at 5:42

must've been a typo. edited

– Michael Kheong
Nov 25 '18 at 13:43

add a comment |

-1

PICTURE PICTURE

PICTURE

<div class="col-9">

                <div class="card-group">

                    <div class="card">

                        <img class="card-img-top" src="carrots.jpg" alt="Card image cap">

                        </div>

                        <div class="card">

                            <img class="card-img-top" src="beets.jpg" alt="Card image cap">

                            </div>

                            <div class="card">

                                <img class="card-img-top" src="asparagus.jpg" alt="Card image cap">

                                </div>

                            </div>

I apologize if the question is very vague. I'm still new and learning about bootstrap

edited Nov 25 '18 at 13:43

asked Nov 25 '18 at 2:31

Michael Kheong

958

The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.

– user3277192
Nov 25 '18 at 2:36

I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S

– Michael Kheong
Nov 25 '18 at 2:43

<div class=".col-9"> - I don't think you want the period on the class name

– user2182349
Nov 25 '18 at 5:42

must've been a typo. edited

– Michael Kheong
Nov 25 '18 at 13:43

add a comment |

-1

PICTURE PICTURE

PICTURE

<div class="col-9">

                <div class="card-group">

                    <div class="card">

                        <img class="card-img-top" src="carrots.jpg" alt="Card image cap">

                        </div>

                        <div class="card">

                            <img class="card-img-top" src="beets.jpg" alt="Card image cap">

                            </div>

                            <div class="card">

                                <img class="card-img-top" src="asparagus.jpg" alt="Card image cap">

                                </div>

                            </div>

I apologize if the question is very vague. I'm still new and learning about bootstrap

edited Nov 25 '18 at 13:43

asked Nov 25 '18 at 2:31

Michael Kheong

958

PICTURE PICTURE

PICTURE

<div class="col-9">

                <div class="card-group">

                    <div class="card">

                        <img class="card-img-top" src="carrots.jpg" alt="Card image cap">

                        </div>

                        <div class="card">

                            <img class="card-img-top" src="beets.jpg" alt="Card image cap">

                            </div>

                            <div class="card">

                                <img class="card-img-top" src="asparagus.jpg" alt="Card image cap">

                                </div>

                            </div>

I apologize if the question is very vague. I'm still new and learning about bootstrap

html css twitter-bootstrap

edited Nov 25 '18 at 13:43

asked Nov 25 '18 at 2:31

Michael Kheong

958

edited Nov 25 '18 at 13:43

asked Nov 25 '18 at 2:31

Michael Kheong

958

edited Nov 25 '18 at 13:43

asked Nov 25 '18 at 2:31

Michael Kheong

958

asked Nov 25 '18 at 2:31

Michael Kheong

958

asked Nov 25 '18 at 2:31

Michael Kheong

958

The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.

– user3277192
Nov 25 '18 at 2:36

I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S

– Michael Kheong
Nov 25 '18 at 2:43

<div class=".col-9"> - I don't think you want the period on the class name

– user2182349
Nov 25 '18 at 5:42

must've been a typo. edited

– Michael Kheong
Nov 25 '18 at 13:43

add a comment |

The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.

– user3277192
Nov 25 '18 at 2:36

I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S

– Michael Kheong
Nov 25 '18 at 2:43

<div class=".col-9"> - I don't think you want the period on the class name

– user2182349
Nov 25 '18 at 5:42

must've been a typo. edited

– Michael Kheong
Nov 25 '18 at 13:43

The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.

– user3277192
Nov 25 '18 at 2:36

I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S

– Michael Kheong
Nov 25 '18 at 2:43

<div class=".col-9"> - I don't think you want the period on the class name

– user2182349
Nov 25 '18 at 5:42

must've been a typo. edited

– Michael Kheong
Nov 25 '18 at 13:43

add a comment |

1 Answer
1

active

oldest

votes

You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:

<div class="container-fluid">

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

</div>

The container-fluid class will make your page responsive. The col-md-4 will split the 12 columns layout into three equal sized parts when the viewport is 992px wide or more. The col-xs-6 will split the layout in two parts.

You can read more about it here

answered Nov 25 '18 at 3:14

Giorgio Zanni

31127

ahh I see. Thanks! I appreciate it

– Michael Kheong
Nov 25 '18 at 13:42

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464165%2fhtml-css-javascript-how-do-i-make-it-so-col-sm-can-replace-media-query%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:

<div class="container-fluid">

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

</div>

You can read more about it here

answered Nov 25 '18 at 3:14

Giorgio Zanni

31127

ahh I see. Thanks! I appreciate it

– Michael Kheong
Nov 25 '18 at 13:42

add a comment |

You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:

<div class="container-fluid">

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

</div>

You can read more about it here

answered Nov 25 '18 at 3:14

Giorgio Zanni

31127

ahh I see. Thanks! I appreciate it

– Michael Kheong
Nov 25 '18 at 13:42

add a comment |

You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:

<div class="container-fluid">

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

</div>

You can read more about it here

answered Nov 25 '18 at 3:14

Giorgio Zanni

31127

You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:

<div class="container-fluid">

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

  <div class="col-md-4 col-xs-6">

    <img>

  </div>

</div>

You can read more about it here

answered Nov 25 '18 at 3:14

Giorgio Zanni

31127

answered Nov 25 '18 at 3:14

Giorgio Zanni

31127

answered Nov 25 '18 at 3:14

Giorgio Zanni

31127

answered Nov 25 '18 at 3:14

Giorgio Zanni

31127

ahh I see. Thanks! I appreciate it

– Michael Kheong
Nov 25 '18 at 13:42

add a comment |

ahh I see. Thanks! I appreciate it

– Michael Kheong
Nov 25 '18 at 13:42

ahh I see. Thanks! I appreciate it

– Michael Kheong
Nov 25 '18 at 13:42

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg