refactor: update responsive behavior

Author: mrholek

src/views/widgets/Widgets.js

@@ -126,7 +126,7 @@ const Widgets = () => {
         </DocsExample>
         <DocsExample href="components/widgets/#cwidgetstatse">
           <CRow xs={{ gutter: 4 }}>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartBar
@@ -197,7 +197,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartBar
@@ -268,7 +268,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartBar
@@ -339,7 +339,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartLine
@@ -418,7 +418,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartLine
@@ -497,7 +497,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartLine
@@ -776,47 +776,47 @@ const Widgets = () => {
         </DocsExample>
         <DocsExample href="components/widgets/#cwidgetstatsc">
           <CRow xs={{ gutter: 4 }}>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilPeople} height={36} />}
                 value="87.500"
                 title="Visitors"
                 progress={{ color: 'info', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilUserFollow} height={36} />}
                 value="385"
                 title="New Clients"
                 progress={{ color: 'success', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilBasket} height={36} />}
                 value="1238"
                 title="Products sold"
                 progress={{ color: 'warning', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilChartPie} height={36} />}
                 value="28%"
                 title="Returning Visitors"
                 progress={{ color: 'primary', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilSpeedometer} height={36} />}
                 value="5:34:11"
                 title="Avg. Time"
                 progress={{ color: 'danger', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilSpeech} height={36} />}
                 value="972"
@@ -828,7 +828,7 @@ const Widgets = () => {
         </DocsExample>
         <DocsExample href="components/widgets/#cwidgetstatsc">
           <CRow xs={{ gutter: 4 }}>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="info"
                 icon={<CIcon icon={cilPeople} height={36} />}
@@ -838,7 +838,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="success"
                 icon={<CIcon icon={cilUserFollow} height={36} />}
@@ -848,7 +848,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="warning"
                 icon={<CIcon icon={cilBasket} height={36} />}
@@ -858,7 +858,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="primary"
                 icon={<CIcon icon={cilChartPie} height={36} />}
@@ -868,7 +868,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="danger"
                 icon={<CIcon icon={cilSpeedometer} height={36} />}
@@ -878,7 +878,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="info"
                 icon={<CIcon icon={cilSpeech} height={36} />}