<div>
Thank you for your insight. I will continue to use this as I work at fixing this site in a couple of weeks. It's a back-burner project so your timing works great.
</div>


Thank you for your insight. I will continue to use this as I work at fixing this site in a couple of weeks. It's a back-burner project so your timing works great.

<div>
<div class="content wysiwyg-content">
I am using Bootstrap and am looking for the best way to accomplish a design where I have three images that I want to appear:<br />
<br />

<ul>
<li>As Three Across on a Wide Desktop Screen</li>
<li>As Two Across on a medium screen with the third centered below.</li>
<li>Stacked on a small screen.</li>
</ul>
<br />
I have attached an image that shows what I'm looking for.<br />
<br />
I know how to get it to do three across for big and stacked for small, but I'm not sure how to design this so that it switches to Two and then One below for the medium.<br />
<br />
A simple example would be helpful. Thanks.<br />
<a href="https://filedb.experts-exchange.com/incoming/2017/03_w11/1150382/bootstrap_example.png" target="_blank" class="file-inline" title="Example of desired screen look. (77 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>bootstrap_example.png</a>
</div>
</div>


bootstrap_example.png

I am using Bootstrap and am looking for the best way to accomplish a design where I have three images that I want to appear:

As Three Across on a Wide Desktop Screen
As Two Across on a medium screen with the third centered below.
Stacked on a small screen.


I have attached an image that shows what I'm looking for.

I know how to get it to do three across for big and stacked for small, but I'm not sure how to design this so that it switches to Two and then One below for the medium.

A simple example would be helpful. Thanks.

Best Bootstrap Way to Do Adaptive Screen for Columns

switches

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.