title: Flexbox not switching from Row to Column on mobile device
body: <p>I'm trying to get Flexbox to work on mobile devices, specfically an iPhone 5.  My goal is to have 3 items span across the page on larger screens like iPad and computer monitor and in a column on a mobile device.  I've used code produced by user Cimmanon: <a href="https://stackoverflow.com/questions/15724698/3-column-responsive-css-ordering-contents-positions">3 Column Responsive CSS (Ordering Contents Positions)</a> to get as close as I can.  I'm a long experienced developer (mostly database work) but a relative newbie to Web development and am frustrated by my lack of success.</p>
  
  <p>I'm using Dreamweaver CC to code in.  When I use the CSS below, my page appears as I think it should and when I upload and test in Chrome, IE, and Firefox, I'm getting the results I expect: 3 items across when the browser window is wide and a column with 3 items when the window is narrow.  However, when I use my iPhone, I continue to get the row with 3 items when what I'm wanting to get is the column.</p>
  
  <p>I've now spent many hours on this and would appreciate any help anyone could pass along.  Thanks in advance.</p>
  
  <pre><code>/*** FLEXBOX ***************************************/
  /*  SECTIONS  */
  .section {
    clear: both;
    padding-top:50px;
    margin: 0px;
  }
  
  .a {
      background-color: #fff;
      text-align: center;
      padding-top: 20px;
  }
  
  .b {
    background-color: #fff;
    text-align:center;
    padding-top:20px;
  }
  
  .c {
    background-color: #fff;
    text-align:center;
    padding-top:20px;
  
  }
  
  /*  GRID OF THREE           ============================================================================= */
  @media only screen and (min-width: 640px) {
    .span_3_of_3 {
      width: 100%;
    }
  
    .span_2_of_3 {
      width: 66.1%;
    }
  
    .span_1_of_3 {
      width: 32.2%;
    }
  
    /*  COLUMN SETUP  */
    .col {
      display: block;
      float: left;
      margin: 1% 0 1% 1.6%;
    }
  
    .col:first-child {
      margin-left: 0;
    }
  }
  @media only screen and (max-width: 640px) {
  
  
    .section {
  
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      width: 100%; /* fix for Firefox */
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  left: 0px;
  right: 0px;
  padding-left: 0px;
    }
  
    .a {
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      -webkit-flex-order: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
      order: 1;
    }
  
    .b {
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2;
      -webkit-flex-order: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2;
    }
  
    .c {
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      -webkit-flex-order: 3;
      -ms-flex-order: 3;
      -webkit-order: 3;
      order: 3;
    }  
  }
  </code></pre>