<!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.0"
/>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin
=
"anonymous"
/>
<
style
>
.green {
background-color: green;
color: white;
border: 2px solid black;
}
</
style
>
<
title
>Responsive utility classes in Bootstrap</
title
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"row"
>
<
span
class
=
"col d-sm-none green"
>
Text 1 of first container
</
span
>
<
span
class
=
"col d-sm-block"
>
Text 2 of first container
</
span
>
<
span
class
=
"col d-sm-none green"
>
Text 3 of first container
</
span
>
</
div
>
<
div
class
=
"row"
>
<
span
class
=
"col d-sm-block"
>
Text 1 of second container
</
span
>
<
span
class
=
"col d-sm-none green"
>
Text 2 of second container
</
span
>
<
span
class
=
"col d-sm-block"
>
Text 3 of second container
</
span
>
</
div
>
</
div
>
<
script
src
=
integrity
=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin
=
"anonymous"
>
</
script
>
</
body
>
</
html
>