nth-child selector two by two excluding first - css-selectors

Question

I am using Craft CMS which is displaying all my projects through one repeating div.
I need each two divs to be one width and the next two to be another but for this to exclude the first div. I tried:
4n, 4n-1, 4n-2, 4n-3 & :first-child
but this just forced the nth-child to start after the exclude first child.
1st - 70%,
2nd - 30%,
3rd - 30%,
4th - 70%,
5th - 70%,
6th - 30%,
7th - 30%, so on...
the effect I'm trying to archive is shown in the attached image. If there's a better way to do it, let me know.

Answer 1

You're on the right track, but I'd advise using counters like 4n+1 rather than 4n-1 to keep it simple.
In this example, I had to subtract some space from the widths to account for the margins in between the blocks. I'm sure you can get that working the way you need though.
One thing that's unclear to me is what exactly you're trying to do with the first block. You can use 4n+2 through 4n+5 to exclude the first block from the range, but I don't know in what way you want it to be different really.
html, body {
margin:0;
}
.item {
display:inline-block;
background:#ccc;
padding:2em;
margin:10px;
box-sizing: border-box;
}
.item:nth-child(4n+1) {
width:calc(70% - 24px)
}
.item:nth-child(4n+2), .item:nth-child(4n+3) {
width:calc(30% - 24px)
}
.item:nth-child(4n+4) {
width:calc(70% - 24px)
}
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>

Answer 2

I have taken the display: flex approach, basically use the order to shift the item to the left when needed, see below snippet:
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.inner-contaner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.inner-contaner .item {
background-color: steelblue;
color: white;
font-weight: bold;
font-family: monospace;
padding: 2em;
margin: 0.5em;
-webkit-box-flex: 1;
-ms-flex: 1 1 70%;
flex: 1 1 70%;
}
.inner-contaner .item:last-child {
-webkit-box-flex: 1;
-ms-flex: 1 1 30%;
flex: 1 1 30%;
background-color: tomato;
}
.inner-contaner:nth-child(even) .item:last-child {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
<div class="flex-container">
<div class="inner-contaner">
<div class="item">item 1</div>
<div class="item">item 2</div>
</div>
<div class="inner-contaner">
<div class="item">item 3</div>
<div class="item">item 4</div>
</div>
<div class="inner-contaner">
<div class="item">item 5</div>
<div class="item">item 6</div>
</div>
<div class="inner-contaner">
<div class="item">item 7</div>
<div class="item">item 8</div>
</div>
<div class="inner-contaner">
<div class="item">item 9</div>
<div class="item">item 10</div>
</div>
<div class="inner-contaner">
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
</div>