In Bootstrap 3, how can I turn a row of columns into a dropdown in mobile view?

Question

I have a row of five graphics with text on them. In mobile view, I want to set up a media query so that the five graphics turn into a dropdown with text. For example, image 1 says "Personal Capability", image 2 says "Leading Change", etc. On mobile view, I want the graphics to go away and the dropdown to have options for "Personal Capability", "Leading Change", etc.

My HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="margin:1%">
  <div class="col-xs-1">
  </div>
  <!--end col-sm-1-->
  <div class="col-xs-2">
    <a href="#">
      <img src="http://placehold.it/150x150" class="img-responsive" title="Personal Capability" style="border:0">
    </a>
  </div>
  <!--end col-sm-2-->
  <div class="col-xs-2">
    <a href="#">
      <img src="http://placehold.it/150x150" class="img-responsive" title="Leading Change" style="border:0">
    </a>
  </div>
  <!--end col-sm-2-->
  <div class="col-xs-2">
    <a href="#">
      <img src="http://placehold.it/150x150" class="img-responsive" title="Character" style="border:0">
    </a>
  </div>
  <!--end col-sm-2-->
  <div class="col-xs-2">
    <a href="#">
      <img src="http://placehold.it/150x150" class="img-responsive" title="Interpersonal Skills" style="border:0">
    </a>
  </div>
  <!--end col-sm-2-->
  <div class="col-xs-2">
    <a href="#">
      <img src="http://placehold.it/150x150" class="img-responsive" title="Focus on Results" style="border:0">
    </a>
  </div>
  <!--end col-sm-2-->
  <div class="col-xs-1">
  </div>
  <!--end col-sm-1-->
</div>
<!--end row-->

Answer 1

Bootstrap provides Responsive utilities. There are some classes you can use to hide or show something according to the screen.

If I understand your problem, you want to display something on mobile only and other things on the other devices.

Bootstrap has something for you, the visible and hidden classes.

In this JSFiddle, you can find out a example of those classes : https://jsfiddle.net/valentinho14/9f4b53yw/

In addition, Please don't use empty block just to push content, like :

<div class="col-xs-1"></div>

It would be better if you choose to use the classes created for that(offset) :

<div class="col-xs-2 col-xs-offset-1">
    Your content
</div>

To have more informations about that, please check the official bootstrap's doc : http://getbootstrap.com/css/#responsive-utilities