CODALSD

В чем проблема используйте media querries и на необходимых breakpoint показывайте или прячьте блоки, если же проблема с тем что бы не было лишнего контента тогда используйте window.resize с динамической подгрузкой. Но первый вариант все же лучше

<div class="flex row">
	<span class="t2 flex column">
		<em class="t1"></em>
		<em class="t2"></em>
	</span>
</div>

.flex {
	display:flex;
}
.row {
	flex-direction:row;
}
.column {
	flex-direction:column;
}
.t1 {
	flex:1 1 100%;
}
.t2 {
	flex:1 1 200px;
}
div {
	width:100%;
	height:100vh;
	background:blue;
}
.flex.column {
	background:red;
}
.column .t1 {
	background:green;
}

Как то так

К сожалению средствами CSS вы не сможете решить эту проблему
JS - решение.

Forms Plus. Но он платный. Соглашусь с Дмитрий Кузнецов , что мешает написать все так, как нужно?

@media (max-width: 575.98px)
.grid {
    width: 50vw;
}
.grid-item {
   width:100%;
}

Как вариант, но картинки будет резать немного

.test {
	width: 400px;
	height: 200px;
	float: left;
	background: #7aadff;
	transform: skewX(15deg);
  margin-left:100px;
}

.test2 {
	width: 400px;
	float: left;
	height: 200px;
	background: #ffd079;
	transform: skewX(15deg);
}
.test:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: -55px;
    z-index: -1;
    background: #7aadff;
    transform-origin: bottom left;
    -ms-transform: skew(-15deg, 0deg);
    -webkit-transform: skew(-15deg, 0deg);
    transform: skew(-15deg, 0deg);
}
.test2:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: #ffd079;
    transform-origin: bottom left;
    -ms-transform: skew(-15deg, 0deg);
    -webkit-transform: skew(-15deg, 0deg);
    transform: skew(-15deg, 0deg);
}

Как один из вариантов для решения возникшего вопроса

1 вариант:

<table style="width: 100%; border-collapse: collapse; padding: 10px 20px; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; color: #333333; text-align: center;">
            <thead>
                <tr>
                  <th colspan="7" style="padding: 15px 0; font-size: 19px; font-weight: bold;">
                   Currency rate changes
                  </th>
                </tr>             
            </thead>
            <tbody>
              <tr class="tr">
                <td class="td">Currency pair</td>
                <td class="td">Exchanges</td>
                <td class="td">Direction</td> 
                <td class="td">Accounting price</td>
                <td class="td">Current price</td>  
                <td class="td">&plusmn;</td> 
                <td class="td">%</td> 
              </tr>

             
            </tbody>
          </table>

th {
  border:none;
}
.tr {
background-color: #e2e2e2;
height: 50px;
padding: 10px;
}
.td {
border: 1px dotted #777; 
border-right: none;
}
.td:first-child {
  height: 50px; 
}
.td:last-child {
  border-right: 1px dotted #777;
}

2 вариант:

th {
  border:none;
 background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
}
.tr {
background-color: #e2e2e2;
height: 50px;
padding: 10px;
}
.td {
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;
border-bottom:1px dotted #777;

}
.td:first-child {
  height: 50px; 
  border-left: 1px dotted #777;
}
.td:last-child {
  border-right: 1px dotted #777;
}