I'm currently working on optimizing a table for mobile responsiveness, and I've encountered an issue with the column titles.
Currently, on desktop view, the column titles are 'Display Color,' 'Up' and 'Down.' Ideally, when the layout switches to mobile, I'd like 'Up' and 'Down' to be displayed on the rows instead. So, instead of just "A:" in a row, it would show "A: Up" followed by "A: Down" or something similar. Is there a way to achieve this functionality using Bootstrap?
You can see what I mean by adjusting the width in this JS Bin example. Currently, when you resize to mobile size, it's not clear which dropdown corresponds to 'Up' and which one is for 'Down.'
Here's the code snippet:
<!-- views/profile.ejs -->
<!doctype html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body { padding-top:80px; word-wrap:break-word; }
</style>
<script>
<link rel="stylesheet" type="text/css" href="/js/scripts.js" />
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-left">
<strong>Display Color</strong>
</div>
<div class="col-md-4 text-left">
<strong>Up</strong>
</div>
<div class="col-md-4 text-left">
<strong>Down</strong>
</div>
</div>
<div class="row">
<div class="col-md-4 text-left">
<strong>A:</strong>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color1U" autocomplete="off">
<option name="name0" value="0"
>white<span class="colorRectangle"></span>
</option>
<option name="name1" value="1"
>red<span class="colorRectangle"></span>
</option>
<option name="name2" value="2"
>orange<span class="colorRectangle"></span>
</option>
</select>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color1D" autocomplete="off">
<option name="name0" value="0"
>white</option>
<option name="name1" value="1"
>red</option>
<option name="name2" value="2"
>orange</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-4 text-left">
<strong>B: </strong>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color2U" autocomplete="off">
<option name="name0" value="0"
>white<span class="colorRectangle"></span>
</option>
<option name="name1" value="1"
selected="selected" >red<span class="colorRectangle"></span>
</option>
<option name="name2" value="2"
>orange<span class="colorRectangle"></span>
</option>
<option name="name3" value="3"
>yellow<span class="colorRectangle"></span>
</option>
</select>
</div>
<div class="col-md-4 text-left">
<select class="bootstrap-select btn col-md-12" name="color2D" autocomplete="off">
<option name="name0" value="0"
>white</option>
<option name="name1" value="1"
selected="selected">red</option>
<option name="name2" value="2"
>orange</option>
</select>
</div>
</div>
<input type="submit" value="Save"/>
</form>
</div>
</body>
</html>