EduardET

Divi :: RTL columns layout

May 2nd, 2019
189
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.97 KB | None | 0 0
  1. @media (max-width: 980px) {
  2.     .rtl .et_pb_row:not([class$="col"]) {
  3.         display: flex;
  4.         flex-direction: column-reverse;
  5.     }
  6.  
  7.     .rtl .et_pb_row .et_pb_column:last-child {
  8.         margin-bottom: 30px;
  9.     }
  10.  
  11.     .rtl .et_pb_row .et_pb_column:first-child {
  12.         margin-bottom: 0;
  13.     }
  14.  
  15.     .rtl .et_pb_row {
  16.         flex-direction: row-reverse;
  17.     }
  18. }
  19.  
  20. @media (max-width: 980px) and (min-width: 480px) {
  21.  
  22.     /*4 columns row*/
  23.     .rtl .et_pb_row.et_pb_row_4col .et_pb_column:first-child {
  24.         order: 3;
  25.     }
  26.  
  27.     .rtl .et_pb_row.et_pb_row_4col .et_pb_column:nth-child(2) {
  28.         order: 4;
  29.         margin-bottom: 0;
  30.     }
  31.  
  32.     .rtl .et_pb_row.et_pb_row_4col .et_pb_column:nth-child(3) {
  33.         order: 1;
  34.         margin-bottom: 30px;
  35.     }
  36.  
  37.     .rtl .et_pb_row.et_pb_row_4col .et_pb_column:last-child {
  38.         order: 2;
  39.     }
  40.  
  41.     /*5 columns row*/
  42.     .rtl .et_pb_row.et_pb_row_5col {
  43.         display: grid;
  44.         grid-template-columns: 1fr 1fr;
  45.         grid-column-gap: 5.5%;
  46.     }
  47.  
  48.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column {
  49.         width: 100%;
  50.         float: none;
  51.  
  52.     }
  53.  
  54.     .rtl .et_pb_row.et_pb_row_5col::after {
  55.         display: none;
  56.     }
  57.  
  58.  
  59.  
  60.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:first-child {
  61.         order: 5;
  62.         margin-right: 0;
  63.     }
  64.  
  65.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:nth-child(2) {
  66.         order: 4;
  67.     }
  68.  
  69.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:nth-child(3) {
  70.         order: 3;
  71.         margin-right: 0;
  72.     }
  73.  
  74.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:nth-child(4) {
  75.         order: 2;
  76.     }
  77.  
  78.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:last-child {
  79.         order: 1;
  80.     }
  81.  
  82.  
  83.     /*6 columns row*/
  84.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:first-child {
  85.         order: 4;
  86.     }
  87.  
  88.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:nth-child(2) {
  89.         order: 5;
  90.     }
  91.  
  92.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:nth-child(3) {
  93.         order: 6;
  94.     }
  95.  
  96.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:nth-child(4) {
  97.         order: 1;
  98.         margin-right: 0;
  99.     }
  100.  
  101.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:nth-child(5) {
  102.         order: 2;
  103.         margin-right: 0;
  104.         margin-left: 5.5%;
  105.     }
  106.  
  107.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:last-child {
  108.         order: 3;
  109.         margin-left: 5.5%;
  110.     }
  111.  
  112.     /*1/4 + 1/4 + 1/2 columns row*/
  113.     .rtl .et_pb_row.et_pb_row_1-4_1-4_1-2 {
  114.         display: grid;
  115.         grid-template-columns: 1fr 1fr;
  116.         grid-column-gap: 5.5%;
  117.     }
  118.  
  119.     .rtl .et_pb_row.et_pb_row_1-4_1-4_1-2 .et_pb_column:last-child {
  120.         order: 1;
  121.     }
  122.  
  123.     .rtl .et_pb_row.et_pb_row_1-4_1-4_1-2 .et_pb_column:nth-child(2) {
  124.         order: 2;
  125.         width: 100%;
  126.     }
  127.  
  128.     .rtl .et_pb_row.et_pb_row_1-4_1-4_1-2 .et_pb_column:first-child {
  129.         order: 3;
  130.         width: 100%;
  131.         margin-right: 0;
  132.         grid-column: span 2;
  133.     }
  134.  
  135.     .rtl .et_pb_row.et_pb_row_1-4_1-4_1-2:after {
  136.         display: none;
  137.     }
  138.  
  139.     /*1/2 + 1/4 + 1/4 columns row*/
  140.     .rtl .et_pb_row.et_pb_row_1-2_1-4_1-4 {
  141.         display: grid;
  142.         grid-template-columns: 1fr 1fr;
  143.         grid-column-gap: 5.5%;
  144.     }
  145.  
  146.     .rtl .et_pb_row.et_pb_row_1-2_1-4_1-4 .et_pb_column:last-child {
  147.         order: 1;
  148.         width: 100%;
  149.         grid-column: span 2;
  150.     }
  151.  
  152.     .rtl .et_pb_row.et_pb_row_1-2_1-4_1-4 .et_pb_column:nth-child(2) {
  153.         order: 2;
  154.         width: 100%;
  155.         margin-right: 0;
  156.     }
  157.  
  158.     .rtl .et_pb_row.et_pb_row_1-2_1-4_1-4 .et_pb_column:first-child {
  159.         order: 3;
  160.         width: 100%;
  161.         margin-right: 0;
  162.     }
  163.  
  164.     .rtl .et_pb_row.et_pb_row_1-2_1-4_1-4:after {
  165.         display: none;
  166.     }
  167.  
  168.     /* 1/5 + 1/5 + 3/5 columns row */
  169.     .rtl .et_pb_row.et_pb_row_1-5_1-5_3-5 {
  170.         display: grid;
  171.         grid-template-columns: 1fr 1fr;
  172.         grid-column-gap: 5.5%;
  173.     }
  174.  
  175.     .rtl .et_pb_row.et_pb_row_1-5_1-5_3-5 .et_pb_column:last-child {
  176.         order: 1;
  177.         width: 100%;
  178.     }
  179.  
  180.     .rtl .et_pb_row.et_pb_row_1-5_1-5_3-5 .et_pb_column:nth-child(2) {
  181.         order: 2;
  182.         width: 100%;
  183.         margin-right: 0;
  184.     }
  185.  
  186.     .rtl .et_pb_row.et_pb_row_1-5_1-5_3-5 .et_pb_column:first-child {
  187.         order: 3;
  188.         width: 100%;
  189.         margin-right: 0;
  190.         grid-column: span 2;
  191.     }
  192.  
  193.     .rtl .et_pb_row.et_pb_row_1-5_1-5_3-5:after {
  194.         display: none;
  195.     }
  196.  
  197.  
  198.  
  199.     /* 3/5 + 1/5 + 1/5 columns row */
  200.     .rtl .et_pb_row.et_pb_row_3-5_1-5_1-5 {
  201.         display: grid;
  202.         grid-template-columns: 1fr 1fr;
  203.         grid-column-gap: 5.5%;
  204.     }
  205.  
  206.     .rtl .et_pb_row.et_pb_row_3-5_1-5_1-5 .et_pb_column:last-child {
  207.         order: 1;
  208.         width: 100%;
  209.         grid-column: span 2;
  210.     }
  211.  
  212.     .rtl .et_pb_row.et_pb_row_3-5_1-5_1-5 .et_pb_column:nth-child(2) {
  213.         order: 2;
  214.         width: 100%;
  215.         margin-right: 0;
  216.     }
  217.  
  218.     .rtl .et_pb_row.et_pb_row_3-5_1-5_1-5 .et_pb_column:first-child {
  219.         order: 3;
  220.         width: 100%;
  221.         margin-right: 0;
  222.     }
  223.  
  224.     .rtl .et_pb_row.et_pb_row_3-5_1-5_1-5:after {
  225.         display: none;
  226.     }
  227.  
  228.  
  229.     /* 1/6 + 1/6 + 1/6 + 1/2 columns row */
  230.  
  231.     .rtl .et_pb_row.et_pb_row_1-6_1-6_1-6_1-2 {
  232.         display: grid;
  233.         grid-template-columns: 1fr 1fr 1fr;
  234.         grid-column-gap: 5.5%;
  235.     }
  236.  
  237.     .rtl .et_pb_row.et_pb_row_1-6_1-6_1-6_1-2 .et_pb_column:first-child {
  238.         width: 100%;
  239.         order: 4;
  240.         margin-right: 0;
  241.         grid-column: span 3;
  242.     }
  243.  
  244.     .rtl .et_pb_row.et_pb_row_1-6_1-6_1-6_1-2 .et_pb_column:nth-child(2) {
  245.         width: 100%;
  246.         order: 3;
  247.         margin-right: 0;
  248.     }
  249.  
  250.     .rtl .et_pb_row.et_pb_row_1-6_1-6_1-6_1-2 .et_pb_column:nth-child(3) {
  251.         width: 100%;
  252.         order: 2;
  253.         margin-right: 0;
  254.     }
  255.  
  256.     .rtl .et_pb_row.et_pb_row_1-6_1-6_1-6_1-2 .et_pb_column:last-child {
  257.         width: 100%;
  258.         order: 1;
  259.     }
  260.  
  261.     .rtl .et_pb_row.et_pb_row_1-6_1-6_1-6_1-2:after {
  262.         display: none;
  263.     }
  264.  
  265.  
  266.     /* 1/2+1/6+1/6+1/6 columns row */
  267.     .rtl .et_pb_row.et_pb_row_1-2_1-6_1-6_1-6 {
  268.         display: grid;
  269.         grid-template-columns: 1fr 1fr 1fr;
  270.         grid-column-gap: 5.5%;
  271.     }
  272.  
  273.     .rtl .et_pb_row.et_pb_row_1-2_1-6_1-6_1-6 .et_pb_column:first-child {
  274.         width: 100%;
  275.         order: 4;
  276.         margin-right: 0;
  277.     }
  278.  
  279.     .rtl .et_pb_row.et_pb_row_1-2_1-6_1-6_1-6 .et_pb_column:nth-child(2) {
  280.         width: 100%;
  281.         order: 3;
  282.         margin-right: 0;
  283.     }
  284.  
  285.     .rtl .et_pb_row.et_pb_row_1-2_1-6_1-6_1-6 .et_pb_column:nth-child(3) {
  286.         width: 100%;
  287.         order: 2;
  288.         margin-right: 0;
  289.     }
  290.  
  291.     .rtl .et_pb_row.et_pb_row_1-2_1-6_1-6_1-6 .et_pb_column:last-child {
  292.         width: 100%;
  293.         order: 1;
  294.         grid-column: span 3;
  295.     }
  296.  
  297.     .rtl .et_pb_row.et_pb_row_1-2_1-6_1-6_1-6:after {
  298.         display: none;
  299.     }
  300. }
  301.  
  302. @media (max-width: 479px) {
  303.  
  304.     /* 4 columns row */
  305.     .rtl .et_pb_row.et_pb_row_4col {
  306.         display: grid;
  307.     }
  308.  
  309.     .rtl .et_pb_row.et_pb_row_4col .et_pb_column:first-child {
  310.         order: 4;
  311.     }
  312.  
  313.     .rtl .et_pb_row.et_pb_row_4col .et_pb_column:nth-child(2) {
  314.         order: 3;
  315.     }
  316.  
  317.     .rtl .et_pb_row.et_pb_row_4col .et_pb_column:nth-child(3) {
  318.         order: 2;
  319.     }
  320.  
  321.     .rtl .et_pb_row.et_pb_row_4col .et_pb_column:last-child {
  322.         order: 1;
  323.     }
  324.  
  325.     /*5 columns row*/
  326.     .rtl .et_pb_row.et_pb_row_5col {
  327.         display: grid;
  328.     }
  329.  
  330.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:first-child {
  331.         order: 5;
  332.     }
  333.  
  334.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:nth-child(2) {
  335.         order: 4;
  336.     }
  337.  
  338.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:nth-child(3) {
  339.         order: 3;
  340.     }
  341.  
  342.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:nth-child(4) {
  343.         order: 2;
  344.     }
  345.  
  346.     .rtl .et_pb_row.et_pb_row_5col .et_pb_column:last-child {
  347.         order: 1;
  348.     }
  349.  
  350.     /*6 columns row*/
  351.     .rtl .et_pb_row.et_pb_row_6col {
  352.         display: grid;
  353.     }
  354.  
  355.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:first-child {
  356.         order: 6;
  357.     }
  358.  
  359.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:nth-child(2) {
  360.         order: 5;
  361.     }
  362.  
  363.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:nth-child(3) {
  364.         order: 4;
  365.     }
  366.  
  367.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:nth-child(4) {
  368.         order: 3;
  369.     }
  370.  
  371.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:nth-child(5) {
  372.         order: 2;
  373.     }
  374.  
  375.     .rtl .et_pb_row.et_pb_row_6col .et_pb_column:last-child {
  376.         order: 1;
  377.     }
  378. }
Advertisement
Add Comment
Please, Sign In to add comment