{"id":136967,"date":"2024-10-11T12:35:46","date_gmt":"2024-10-11T07:05:46","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136967"},"modified":"2024-10-16T12:49:19","modified_gmt":"2024-10-16T07:19:19","slug":"visual-reordering-fluid-layout-and-flexbox","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/visual-reordering-fluid-layout-and-flexbox\/","title":{"rendered":"Visual Reordering | Fluid Layout and Flexbox"},"content":{"rendered":"\n

Visual reordering refers to the ability to change the order of elements on a web page based on the screen size or device orientation. This technique is essential for creating responsive layouts that adapt to different devices and screen sizes.<\/p>\n\n\n\n

Methods for Visual Reordering<\/strong><\/p>\n\n\n\n

    \n
  1. CSS Flexbox<\/strong><\/li>\n\n\n\n
  2. flex-direction property:<\/strong> Control the direction of the flex items (row, column, row-reverse, column-reverse).<\/li>\n\n\n\n
  3. order property:<\/strong> Specify the order of individual flex items.<\/li>\n<\/ol>\n\n\n\n

    Example:<\/strong><\/p>\n\n\n\n

    HTML<\/p>\n\n\n\n

    <div class=”container”><\/p>\n\n\n\n

      <div class=”item”>Item 1<\/div><\/p>\n\n\n\n

      <div class=”item”>Item 2<\/div><\/p>\n\n\n\n

      <div class=”item”>Item 3<\/div><\/p>\n\n\n\n

    <\/div><\/p>\n\n\n\n

    CSS<\/p>\n\n\n\n

    .container {<\/p>\n\n\n\n

      display: flex;<\/p>\n\n\n\n

      flex-direction: <\/p>\n\n\n\n

    column; \/* Change to row for horizontal layout *\/<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    .item {<\/p>\n\n\n\n

      flex: 1;<\/p>\n\n\n\n

      padding: 10px;<\/p>\n\n\n\n

      border: 1px solid #ccc;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    @media only screen and (min-width: 768px) {<\/p>\n\n\n\n

      .container {<\/p>\n\n\n\n

        flex-direction: row;<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      .item:nth-child(2) {<\/p>\n\n\n\n

        order: -1; \/* Move the second item to the beginning *\/<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

      \n
    1. CSS Grid Layout<\/strong><\/li>\n\n\n\n
    2. Grid tracks:<\/strong> Define the layout of the grid using grid tracks.<\/li>\n\n\n\n
    3. Grid placement:<\/strong> Place elements within the grid using grid placement properties like grid-column and grid-row.<\/li>\n<\/ol>\n\n\n\n

      Example:<\/strong><\/p>\n\n\n\n

      HTML<\/p>\n\n\n\n

      <div class=”container”><\/p>\n\n\n\n

        <div class=”item”>Item 1<\/div><\/p>\n\n\n\n

        <div class=”item”>Item 2<\/div><\/p>\n\n\n\n

        <div class=”item”>Item 3<\/div><\/p>\n\n\n\n

      <\/div><\/p>\n\n\n\n

      CSS<\/p>\n\n\n\n

      .container {<\/p>\n\n\n\n

        display: <\/p>\n\n\n\n

      grid;<\/p>\n\n\n\n

        grid-template-columns: 1fr 1fr 1fr;<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      .item {<\/p>\n\n\n\n

        padding: 10px;<\/p>\n\n\n\n

        border: 1px solid #ccc;<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      @media only screen and (max-width: 768px) {<\/p>\n\n\n\n

        .container {<\/p>\n\n\n\n

          grid-template-columns: 1fr;<\/p>\n\n\n\n

        }<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

        \n
      1. JavaScript-based Reordering<\/strong><\/li>\n\n\n\n
      2. Use JavaScript to dynamically manipulate the DOM and reorder elements based on screen size or other conditions.<\/li>\n<\/ol>\n\n\n\n

        Best Practices<\/strong><\/p>\n\n\n\n