Fundación - Ordenamiento de fuente de cuadrícula flexible

Descripción

El orden de las fuentes ayuda a reorganizar la columna en diferentes tamaños de pantallas. Usando la propiedad de orden , las columnas se ordenan en la fila, es decir, el número más bajo se organiza en el primer lugar.

Ejemplo

El siguiente ejemplo demuestra el uso de Source Ordering en Foundation:

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <title>Foundation Template</title>
      <link rel = "stylesheet" href = "css/foundation.css" />
      
      <script src = "js/vendor/jquery.min.js"></script>
      <script src = "js/foundation.min.js"></script>
   </head>

   <body>
      <h2>Example of Flex Grid</h2>
      
      <div class = "row">
         <div class = "column order-1 medium-order-2" style = "background-color:#8BD6EE;">
            Appears first on small screen
         </div>
         
         <div class = "column order-2 medium-order-1" style = "background-color:#7B68EE;">
            Appears second on small screen
         </div>
      </div>
   
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente flex_grid_source_ordering.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page