I was attempting to use the Bootstrap 4 (alpha 6) grid system. I came with the following test, using "maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
<body>
<div class="container-fluid">
<div class="row">
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">1</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">2</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">3</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">4</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">5</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">6</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">7</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">8</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">9</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">10</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">11</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">12</div>
</div>
</div>
</body>
Yes, the columns are reversed to what you would normally expect, but it made it easier to see the breakpoints being applied. In a PC browser the breakpoints work as I resize the screen - a single row on a narrow screen, 6 rows when I go full width.
On my iPhone 5 (640×1136) I expected to see the col-sm-2 and the col-lg-4 being applied depending on the rotation. Instead all I see is the col-md-3 configuration. The same happens with an Android (Amazon Fire).
To summarise, when I use the bootstrap grid on an iphone5, all I get is the medium viewport irrespective of rotation. Am I doing something wrong or is "medium" the standard viewport for a phone?
