グリッドシステム sun@grid改（flex版）

bootstrap のグリッドシステムをflexで組み替えました。ブレイクポイントで切り替える要素を追加しています。

xs：0 ～ 767px
sm：768px ～ 991px
md：992px ～ 1199px
lg：1200px ～

Source

/* ================================================
　Grid-system [xs] 768 [sm] 992 [md] 1200 [lg]
================================================ */
.sunflex {display: flex;　flex-wrap: wrap;}

.sunflex.inline {display: inline-flex;}

.sunflex.reverse {flex-direction: row-reverse; justify-content: flex-end;}
.sunflex.reverse.left {justify-content: flex-end;}
.sunflex.reverse.right {justify-content: flex-start;}

.sunflex.between {justify-content: space-between;}
.sunflex.around {justify-content: space-around;}
.sunflex.center {justify-content: center;}
.sunflex.left {justify-content: flex-start;}
.sunflex.right {justify-content: flex-end;}

.sunflex.top {align-items: flex-start;}
.sunflex.top.stretch {align-items: stretch;}
.sunflex.top.stretch>* {display: flex; align-items: flex-start;}

.sunflex.middle {align-items: center;}
.sunflex.middle.stretch {align-items: stretch;}
.sunflex.middle.stretch>* {display: flex; align-items: center;}

.sunflex.bottom {align-items: flex-end;}
.sunflex.bottom.stretch {align-items: stretch;}
.sunflex.bottom.stretch>* {display: flex; align-items: flex-end;}

.sunflex.contentTop {align-content: flex-start;}
.sunflex.contentMiddle {align-content: center;}
.sunflex.contentBottom {align-content: flex-end;}
.sunflex.contentStrech {align-content: stretch;}
.sunflex.contentBetween {align-content: space-between;}
.sunflex.contentAround {align-content: space-around;}

.sunflex>.top:not(.sunflex) {align-self: flex-start;}
.sunflex>.middle:not(.sunflex) {align-self: center;}
.sunflex>.bottom:not(.sunflex) {align-self: flex-end;}

.sunflex>* {list-style: none;}

.sunflex *[class^="col-"]>*,
.sunflex *[class^="size-"]>*,
.sunflex *[class^="mono-"]>* {height: 100%;}

.row {margin-right: -1.5%; margin-left: -1.5%;}
.row:not(.flex):after {
    content: "";
    display: block;
    clear: both;}
.row+.row {margin-top: 1em;}

.row *[class^="col-"], .row *[class^="size-"], .row *[class^="mono-"] {
    position: relative;
    min-height: 1px;
    padding-right: 1.5%;
    padding-left: 1.5%;
}

.size-xs-05 {width: 5%;}
.size-xs-10 {width: 10%;}
.size-xs-15 {width: 15%;}
.size-xs-20 {width: 20%;}
.size-xs-25 {width: 25%;}
.size-xs-30 {width: 30%;}
.size-xs-35 {width: 35%;}
.size-xs-40 {width: 40%;}
.size-xs-45 {width: 45%;}
.size-xs-50 {width: 50%;}
.size-xs-55 {width: 55%;}
.size-xs-60 {width: 60%;}
.size-xs-65 {width: 65%;}
.size-xs-70 {width: 70%;}
.size-xs-75 {width: 75%;}
.size-xs-80 {width: 80%;}
.size-xs-85 {width: 85%;}
.size-xs-90 {width: 90%;}
.size-xs-95 {width: 95%;}
.size-xs-100 {width: 100%;}

@media print, screen and (min-width: 768px) {
    .size-sm-05 {width: 5%;}
    .size-sm-10 {width: 10%;}
    .size-sm-15 {width: 15%;}
    .size-sm-20 {width: 20%;}
    .size-sm-25 {width: 25%;}
    .size-sm-30 {width: 30%;}
    .size-sm-35 {width: 35%;}
    .size-sm-40 {width: 40%;}
    .size-sm-45 {width: 45%;}
    .size-sm-50 {width: 50%;}
    .size-sm-55 {width: 55%;}
    .size-sm-60 {width: 60%;}
    .size-sm-65 {width: 65%;}
    .size-sm-70 {width: 70%;}
    .size-sm-75 {width: 75%;}
    .size-sm-80 {width: 80%;}
    .size-sm-85 {width: 85%;}
    .size-sm-90 {width: 90%;}
    .size-sm-95 {width: 95%;}
    .size-sm-100 {width: 100%;}
}

@media screen and (min-width: 992px) {
    .size-md-05 {width: 5%;}
    .size-md-10 {width: 10%;}
    .size-md-15 {width: 15%;}
    .size-md-20 {width: 20%;}
    .size-md-25 {width: 25%;}
    .size-md-30 {width: 30%;}
    .size-md-35 {width: 35%;}
    .size-md-40 {width: 40%;}
    .size-md-45 {width: 45%;}
    .size-md-50 {width: 50%;}
    .size-md-55 {width: 55%;}
    .size-md-60 {width: 60%;}
    .size-md-65 {width: 65%;}
    .size-md-70 {width: 70%;}
    .size-md-75 {width: 75%;}
    .size-md-80 {width: 80%;}
    .size-md-85 {width: 85%;}
    .size-md-90 {width: 90%;}
    .size-md-95 {width: 95%;}
    .size-md-100 {width: 100%;}
}

@media screen and (min-width: 1200px) {
    .size-lg-05 {width: 5%;}
    .size-lg-10 {width: 10%;}
    .size-lg-15 {width: 15%;}
    .size-lg-20 {width: 20%;}
    .size-lg-25 {width: 25%;}
    .size-lg-30 {width: 30%;}
    .size-lg-35 {width: 35%;}
    .size-lg-40 {width: 40%;}
    .size-lg-45 {width: 45%;}
    .size-lg-50 {width: 50%;}
    .size-lg-55 {width: 55%;}
    .size-lg-60 {width: 60%;}
    .size-lg-65 {width: 65%;}
    .size-lg-70 {width: 70%;}
    .size-lg-75 {width: 75%;}
    .size-lg-80 {width: 80%;}
    .size-lg-85 {width: 85%;}
    .size-lg-90 {width: 90%;}
    .size-lg-95 {width: 95%;}
    .size-lg-100 {width: 100%;}
}

.col-xs-12 {width: 100%;}
.col-xs-11 {width: 91.66667%;}
.col-xs-10 {width: 83.33333%;}
.col-xs-9 {width: 75%;}
.col-xs-8 {width: 66.66667%;}
.col-xs-7 {width: 58.33333%;}
.col-xs-6 {width: 50%;}
.col-xs-5 {width: 41.66667%;}
.col-xs-4 {width: 33.33333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.66667%;}
.col-xs-1 {width: 8.33333%;}
.mono-xs-5 {width: 20%;}
.mono-xs-7 {width: 14.28571%;}
.mono-xs-8 {width: 12.5%;}
.mono-xs-9 {width: 11.11111%;}
.mono-xs-10 {width: 10%;}
.mono-xs-11 {width: 9.09091%;}

@media print, screen and (min-width: 768px) {
    .col-sm-12 {width: 100%;}
    .col-sm-11 {width: 91.66667%;}
    .col-sm-10 {width: 83.33333%;}
    .col-sm-9 {width: 75%;}
    .col-sm-8 {width: 66.66667%;}
    .col-sm-7 {width: 58.33333%;}
    .col-sm-6 {width: 50%;}
    .col-sm-5 {width: 41.66667%;}
    .col-sm-4 {width: 33.33333%;}
    .col-sm-3 {width: 25%;}
    .col-sm-2 {width: 16.66667%;}
    .col-sm-1 {width: 8.33333%;}
    .mono-sm-5 {width: 20%;}
    .mono-sm-7 {width: 14.28571%;}
    .mono-sm-8 {width: 12.5%;}
    .mono-sm-9 {width: 11.11111%;}
    .mono-sm-10 {width: 10%;}
    .mono-sm-11 {width: 9.09091%;}
}

@media screen and (min-width: 992px) {
    .col-md-12 {width: 100%;}
    .col-md-11 {width: 91.66667%;}
    .col-md-10 {width: 83.33333%;}
    .col-md-9 {width: 75%;}
    .col-md-8 {width: 66.66667%;}
    .col-md-7 {width: 58.33333%;}
    .col-md-6 {width: 50%;}
    .col-md-5 {width: 41.66667%;}
    .col-md-4 {width: 33.33333%;}
    .col-md-3 {width: 25%;}
    .col-md-2 {width: 16.66667%;}
    .col-md-1 {width: 8.33333%;}
    .mono-md-5 {width: 20%;}
    .mono-md-7 {width: 14.28571%;}
    .mono-md-8 {width: 12.5%;}
    .mono-md-9 {width: 11.11111%;}
    .mono-md-10 {width: 10%;}
    .mono-md-11 {width: 9.09091%;}
}

@media screen and (min-width: 1200px) {
    .col-lg-12 {width: 100%;}
    .col-lg-11 {width: 91.66667%;}
    .col-lg-10 {width: 83.33333%;}
    .col-lg-9 {width: 75%;}
    .col-lg-8 {width: 66.66667%;}
    .col-lg-7 {width: 58.33333%;}
    .col-lg-6 {width: 50%;}
    .col-lg-5 {width: 41.66667%;}
    .col-lg-4 {width: 33.33333%;}
    .col-lg-3 {width: 25%;}
    .col-lg-2 {width: 16.66667%;}
    .col-lg-1 {width: 8.33333%;}
    .mono-lg-5 {width: 20%;}
    .mono-lg-7 {width: 14.28571%;}
    .mono-lg-8 {width: 12.5%;}
    .mono-lg-9 {width: 11.11111%;}
    .mono-lg-10 {width: 10%;}
    .mono-lg-11 {width: 9.09091%;}
}
.row:not(.flex) *[class^="col-xs-"],
.row:not(.flex) *[class^="size-xs-"],
.row:not(.flex) *[class^="mono-xs-"] {float: left;}

.row:not(.flex).reverse *[class^="col-xs-"],
.row:not(.flex).reverse *[class^="size-xs-"],
.row:not(.flex).reverse *[class^="mono-xs-"] {float: right;}

.row.flex {display: flex; flex-wrap: wrap;}
.row.flex.reverse {flex-direction: row-reverse;}

@media print, screen and (min-width: 768px) {
    .row:not(.flex) *[class^="col-sm-"],
    .row:not(.flex) *[class^="size-sm-"],
    .row:not(.flex) *[class^="mono-sm-"] {float: left;}
    .row:not(.flex).reverse *[class^="col-sm-"],
    .row:not(.flex).reverse *[class^="size-sm-"],
    .row:not(.flex).reverse *[class^="mono-sm-"] {float: right;}
}

@media screen and (min-width: 992px) {
    .row:not(.flex) *[class^="col-md-"],
    .row:not(.flex) *[class^="size-md-"],
    .row:not(.flex) *[class^="mono-md-"] {float: left;}
    .row:not(.flex).reverse *[class^="col-md-"],
    .row:not(.flex).reverse *[class^="size-md-"],
    .row:not(.flex).reverse *[class^="mono-md-"] {float: right;}
}

@media screen and (min-width: 1200px) {
    .row:not(.flex) *[class^="col-lg-"],
    .row:not(.flex) *[class^="size-lg-"],
    .row:not(.flex) *[class^="mono-lg-"] {float: left;}
    .row:not(.flex).reverse *[class^="col-lg-"],
    .row:not(.flex).reverse *[class^="size-lg-"],
    .row:not(.flex).reverse *[class^="mono-lg-"] {float: right;}
}

.col-xs-offset-12 {margin-left: 100%;}
.col-xs-offset-11 {margin-left: 91.66667%;}
.col-xs-offset-10 {margin-left: 83.33333%;}
.col-xs-offset-9 {margin-left: 75%;}
.col-xs-offset-8 {margin-left: 66.66667%;}
.col-xs-offset-7 {margin-left: 58.33333%;}
.col-xs-offset-6 {margin-left: 50%;}
.col-xs-offset-5 {margin-left: 41.66667%;}
.col-xs-offset-4 {margin-left: 33.33333%;}
.col-xs-offset-3 {margin-left: 25%;}
.col-xs-offset-2 {margin-left: 16.66667%;}
.col-xs-offset-1 {margin-left: 8.33333%;}
.col-xs-offset-0 {margin-left: 0;}

@media print, screen and (min-width: 768px) {
    .col-sm-offset-12 {margin-left: 100%;}
    .col-sm-offset-11 {margin-left: 91.66667%;}
    .col-sm-offset-10 {margin-left: 83.33333%;}
    .col-sm-offset-9 {margin-left: 75%;}
    .col-sm-offset-8 {margin-left: 66.66667%;}
    .col-sm-offset-7 {margin-left: 58.33333%;}
    .col-sm-offset-6 {margin-left: 50%;}
    .col-sm-offset-5 {margin-left: 41.66667%;}
    .col-sm-offset-4 {margin-left: 33.33333%;}
    .col-sm-offset-3 {margin-left: 25%;}
    .col-sm-offset-2 {margin-left: 16.66667%;}
    .col-sm-offset-1 {margin-left: 8.33333%;}
    .col-sm-offset-0 {margin-left: 0;}
}

@media screen and (min-width: 992px) {
    .col-md-offset-12 {margin-left: 100%;}
    .col-md-offset-11 {margin-left: 91.66667%;}
    .col-md-offset-10 {margin-left: 83.33333%;}
    .col-md-offset-9 {margin-left: 75%;}
    .col-md-offset-8 {margin-left: 66.66667%;}
    .col-md-offset-7 {margin-left: 58.33333%;}
    .col-md-offset-6 {margin-left: 50%;}
    .col-md-offset-5 {margin-left: 41.66667%;}
    .col-md-offset-4 {margin-left: 33.33333%;}
    .col-md-offset-3 {margin-left: 25%;}
    .col-md-offset-2 {margin-left: 16.66667%;}
    .col-md-offset-1 {margin-left: 8.33333%;}
    .col-md-offset-0 {margin-left: 0;}
}

@media screen and (min-width: 1200px) {
    .col-lg-offset-12 {margin-left: 100%;}
    .col-lg-offset-11 {margin-left: 91.66667%;}
    .col-lg-offset-10 {margin-left: 83.33333%;}
    .col-lg-offset-9 {margin-left: 75%;}
    .col-lg-offset-8 {margin-left: 66.66667%;}
    .col-lg-offset-7 {margin-left: 58.33333%;}
    .col-lg-offset-6 {margin-left: 50%;}
    .col-lg-offset-5 {margin-left: 41.66667%;}
    .col-lg-offset-4 {margin-left: 33.33333%;}
    .col-lg-offset-3 {margin-left: 25%;}
    .col-lg-offset-2 {margin-left: 16.66667%;}
    .col-lg-offset-1 {margin-left: 8.33333%;}
    .col-lg-offset-0 {margin-left: 0;}
}

.col-xs-pull-12 {right: 100%;}
.col-xs-pull-11 {right: 91.66667%;}
.col-xs-pull-10 {right: 83.33333%;}
.col-xs-pull-9 {right: 75%;}
.col-xs-pull-8 {right: 66.66667%;}
.col-xs-pull-7 {right: 58.33333%;}
.col-xs-pull-6 {right: 50%;}
.col-xs-pull-5 {right: 41.66667%;}
.col-xs-pull-4 {right: 33.33333%;}
.col-xs-pull-3 {right: 25%;}
.col-xs-pull-2 {right: 16.66667%;}
.col-xs-pull-1 {right: 8.33333%;}
.col-xs-pull-0 {right: auto;}

@media print, screen and (min-width: 768px) {
    .col-sm-pull-12 {right: 100%;}
    .col-sm-pull-11 {right: 91.66667%;}
    .col-sm-pull-10 {right: 83.33333%;}
    .col-sm-pull-9 {right: 75%;}
    .col-sm-pull-8 {right: 66.66667%;}
    .col-sm-pull-7 {right: 58.33333%;}
    .col-sm-pull-6 {right: 50%;}
    .col-sm-pull-5 {right: 41.66667%;}
    .col-sm-pull-4 {right: 33.33333%;}
    .col-sm-pull-3 {right: 25%;}
    .col-sm-pull-2 {right: 16.66667%;}
    .col-sm-pull-1 {right: 8.33333%;}
    .col-sm-pull-0 {right: auto;}
}

@media screen and (min-width: 992px) {
    .col-md-pull-12 {right: 100%;}
    .col-md-pull-11 {right: 91.66667%;}
    .col-md-pull-10 {right: 83.33333%;}
    .col-md-pull-9 {right: 75%;}
    .col-md-pull-8 {right: 66.66667%;}
    .col-md-pull-7 {right: 58.33333%;}
    .col-md-pull-6 {right: 50%;}
    .col-md-pull-5 {right: 41.66667%;}
    .col-md-pull-4 {right: 33.33333%;}
    .col-md-pull-3 {right: 25%;}
    .col-md-pull-2 {right: 16.66667%;}
    .col-md-pull-1 {right: 8.33333%;}
    .col-md-pull-0 {right: auto;}
}

@media screen and (min-width: 1200px) {
    .col-lg-pull-12 {right: 100%;}
    .col-lg-pull-11 {right: 91.66667%;}
    .col-lg-pull-10 {right: 83.33333%;}
    .col-lg-pull-9 {right: 75%;}
    .col-lg-pull-8 {right: 66.66667%;}
    .col-lg-pull-7 {right: 58.33333%;}
    .col-lg-pull-6 {right: 50%;}
    .col-lg-pull-5 {right: 41.66667%;}
    .col-lg-pull-4 {right: 33.33333%;}
    .col-lg-pull-3 {right: 25%;}
    .col-lg-pull-2 {right: 16.66667%;}
    .col-lg-pull-1 {right: 8.33333%;}
    .col-lg-pull-0 {right: auto;}
}

.col-xs-push-12 {left: 100%;}
.col-xs-push-11 {left: 91.66667%;}
.col-xs-push-10 {left: 83.33333%;}
.col-xs-push-9 {left: 75%;}
.col-xs-push-8 {left: 66.66667%;}
.col-xs-push-7 {left: 58.33333%;}
.col-xs-push-6 {left: 50%;}
.col-xs-push-5 {left: 41.66667%;}
.col-xs-push-4 {left: 33.33333%;}
.col-xs-push-3 {left: 25%;}
.col-xs-push-2 {left: 16.66667%;}
.col-xs-push-1 {left: 8.33333%;}
.col-xs-push-0 {left: auto;}

@media print, screen and (min-width: 768px) {
    .col-sm-push-12 {left: 100%;}
    .col-sm-push-11 {left: 91.66667%;}
    .col-sm-push-10 {left: 83.33333%;}
    .col-sm-push-9 {left: 75%;}
    .col-sm-push-8 {left: 66.66667%;}
    .col-sm-push-7 {left: 58.33333%;}
    .col-sm-push-6 {left: 50%;}
    .col-sm-push-5 {left: 41.66667%;}
    .col-sm-push-4 {left: 33.33333%;}
    .col-sm-push-3 {left: 25%;}
    .col-sm-push-2 {left: 16.66667%;}
    .col-sm-push-1 {left: 8.33333%;}
    .col-sm-push-0 {left: auto;}
}

@media screen and (min-width: 992px) {
    .col-md-push-12 {left: 100%;}
    .col-md-push-11 {left: 91.66667%;}
    .col-md-push-10 {left: 83.33333%;}
    .col-md-push-9 {left: 75%;}
    .col-md-push-8 {left: 66.66667%;}
    .col-md-push-7 {left: 58.33333%;}
    .col-md-push-6 {left: 50%;}
    .col-md-push-5 {left: 41.66667%;}
    .col-md-push-4 {left: 33.33333%;}
    .col-md-push-3 {left: 25%;}
    .col-md-push-2 {left: 16.66667%;}
    .col-md-push-1 {left: 8.33333%;}
    .col-md-push-0 {left: auto;}
}

@media screen and (min-width: 1200px) {
    .col-lg-push-12 {left: 100%;}
    .col-lg-push-11 {left: 91.66667%;}
    .col-lg-push-10 {left: 83.33333%;}
    .col-lg-push-9 {left: 75%;}
    .col-lg-push-8 {left: 66.66667%;}
    .col-lg-push-7 {left: 58.33333%;}
    .col-lg-push-6 {left: 50%;}
    .col-lg-push-5 {left: 41.66667%;}
    .col-lg-push-4 {left: 33.33333%;}
    .col-lg-push-3 {left: 25%;}
    .col-lg-push-2 {left: 16.66667%;}
    .col-lg-push-1 {left: 8.33333%;}
    .col-lg-push-0 {left: auto;}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

/* ================================================

　Grid-system [xs] 768 [sm] 992 [md] 1200 [lg]

================================================ */

.sunflex {display: flex;　flex-wrap: wrap;}

.sunflex.inline {display: inline-flex;}

.sunflex.reverse {flex-direction: row-reverse; justify-content: flex-end;}

.sunflex.reverse.left {justify-content: flex-end;}

.sunflex.reverse.right {justify-content: flex-start;}

.sunflex.between {justify-content: space-between;}

.sunflex.around {justify-content: space-around;}

.sunflex.center {justify-content: center;}

.sunflex.left {justify-content: flex-start;}

.sunflex.right {justify-content: flex-end;}

.sunflex.top {align-items: flex-start;}

.sunflex.top.stretch {align-items: stretch;}

.sunflex.top.stretch>* {display: flex; align-items: flex-start;}

.sunflex.middle {align-items: center;}

.sunflex.middle.stretch {align-items: stretch;}

.sunflex.middle.stretch>* {display: flex; align-items: center;}

.sunflex.bottom {align-items: flex-end;}

.sunflex.bottom.stretch {align-items: stretch;}

.sunflex.bottom.stretch>* {display: flex; align-items: flex-end;}

.sunflex.contentTop {align-content: flex-start;}

.sunflex.contentMiddle {align-content: center;}

.sunflex.contentBottom {align-content: flex-end;}

.sunflex.contentStrech {align-content: stretch;}

.sunflex.contentBetween {align-content: space-between;}

.sunflex.contentAround {align-content: space-around;}

.sunflex>.top:not(.sunflex) {align-self: flex-start;}

.sunflex>.middle:not(.sunflex) {align-self: center;}

.sunflex>.bottom:not(.sunflex) {align-self: flex-end;}

.sunflex>* {list-style: none;}

.sunflex *[class^="col-"]>*,

.sunflex *[class^="size-"]>*,

.sunflex *[class^="mono-"]>* {height: 100%;}

.row {margin-right: -1.5%; margin-left: -1.5%;}

.row:not(.flex):after {

content: "";

display: block;

clear: both;}

.row+.row {margin-top: 1em;}

.row *[class^="col-"], .row *[class^="size-"], .row *[class^="mono-"] {

position: relative;

min-height: 1px;

padding-right: 1.5%;

padding-left: 1.5%;

}

.size-xs-05 {width: 5%;}

.size-xs-10 {width: 10%;}

.size-xs-15 {width: 15%;}

.size-xs-20 {width: 20%;}

.size-xs-25 {width: 25%;}

.size-xs-30 {width: 30%;}

.size-xs-35 {width: 35%;}

.size-xs-40 {width: 40%;}

.size-xs-45 {width: 45%;}

.size-xs-50 {width: 50%;}

.size-xs-55 {width: 55%;}

.size-xs-60 {width: 60%;}

.size-xs-65 {width: 65%;}

.size-xs-70 {width: 70%;}

.size-xs-75 {width: 75%;}

.size-xs-80 {width: 80%;}

.size-xs-85 {width: 85%;}

.size-xs-90 {width: 90%;}

.size-xs-95 {width: 95%;}

.size-xs-100 {width: 100%;}

@media print, screen and (min-width: 768px) {

.size-sm-05 {width: 5%;}

.size-sm-10 {width: 10%;}

.size-sm-15 {width: 15%;}

.size-sm-20 {width: 20%;}

.size-sm-25 {width: 25%;}

.size-sm-30 {width: 30%;}

.size-sm-35 {width: 35%;}

.size-sm-40 {width: 40%;}

.size-sm-45 {width: 45%;}

.size-sm-50 {width: 50%;}

.size-sm-55 {width: 55%;}

.size-sm-60 {width: 60%;}

.size-sm-65 {width: 65%;}

.size-sm-70 {width: 70%;}

.size-sm-75 {width: 75%;}

.size-sm-80 {width: 80%;}

.size-sm-85 {width: 85%;}

.size-sm-90 {width: 90%;}

.size-sm-95 {width: 95%;}

.size-sm-100 {width: 100%;}

}

@media screen and (min-width: 992px) {

.size-md-05 {width: 5%;}

.size-md-10 {width: 10%;}

.size-md-15 {width: 15%;}

.size-md-20 {width: 20%;}

.size-md-25 {width: 25%;}

.size-md-30 {width: 30%;}

.size-md-35 {width: 35%;}

.size-md-40 {width: 40%;}

.size-md-45 {width: 45%;}

.size-md-50 {width: 50%;}

.size-md-55 {width: 55%;}

.size-md-60 {width: 60%;}

.size-md-65 {width: 65%;}

.size-md-70 {width: 70%;}

.size-md-75 {width: 75%;}

.size-md-80 {width: 80%;}

.size-md-85 {width: 85%;}

.size-md-90 {width: 90%;}

.size-md-95 {width: 95%;}

.size-md-100 {width: 100%;}

}

@media screen and (min-width: 1200px) {

.size-lg-05 {width: 5%;}

.size-lg-10 {width: 10%;}

.size-lg-15 {width: 15%;}

.size-lg-20 {width: 20%;}

.size-lg-25 {width: 25%;}

.size-lg-30 {width: 30%;}

.size-lg-35 {width: 35%;}

.size-lg-40 {width: 40%;}

.size-lg-45 {width: 45%;}

.size-lg-50 {width: 50%;}

.size-lg-55 {width: 55%;}

.size-lg-60 {width: 60%;}

.size-lg-65 {width: 65%;}

.size-lg-70 {width: 70%;}

.size-lg-75 {width: 75%;}

.size-lg-80 {width: 80%;}

.size-lg-85 {width: 85%;}

.size-lg-90 {width: 90%;}

.size-lg-95 {width: 95%;}

.size-lg-100 {width: 100%;}

}

.col-xs-12 {width: 100%;}

.col-xs-11 {width: 91.66667%;}

.col-xs-10 {width: 83.33333%;}

.col-xs-9 {width: 75%;}

.col-xs-8 {width: 66.66667%;}

.col-xs-7 {width: 58.33333%;}

.col-xs-6 {width: 50%;}

.col-xs-5 {width: 41.66667%;}

.col-xs-4 {width: 33.33333%;}

.col-xs-3 {width: 25%;}

.col-xs-2 {width: 16.66667%;}

.col-xs-1 {width: 8.33333%;}

.mono-xs-5 {width: 20%;}

.mono-xs-7 {width: 14.28571%;}

.mono-xs-8 {width: 12.5%;}

.mono-xs-9 {width: 11.11111%;}

.mono-xs-10 {width: 10%;}

.mono-xs-11 {width: 9.09091%;}

@media print, screen and (min-width: 768px) {

.col-sm-12 {width: 100%;}

.col-sm-11 {width: 91.66667%;}

.col-sm-10 {width: 83.33333%;}

.col-sm-9 {width: 75%;}

.col-sm-8 {width: 66.66667%;}

.col-sm-7 {width: 58.33333%;}

.col-sm-6 {width: 50%;}

.col-sm-5 {width: 41.66667%;}

.col-sm-4 {width: 33.33333%;}

.col-sm-3 {width: 25%;}

.col-sm-2 {width: 16.66667%;}

.col-sm-1 {width: 8.33333%;}

.mono-sm-5 {width: 20%;}

.mono-sm-7 {width: 14.28571%;}

.mono-sm-8 {width: 12.5%;}

.mono-sm-9 {width: 11.11111%;}

.mono-sm-10 {width: 10%;}

.mono-sm-11 {width: 9.09091%;}

}

@media screen and (min-width: 992px) {

.col-md-12 {width: 100%;}

.col-md-11 {width: 91.66667%;}

.col-md-10 {width: 83.33333%;}

.col-md-9 {width: 75%;}

.col-md-8 {width: 66.66667%;}

.col-md-7 {width: 58.33333%;}

.col-md-6 {width: 50%;}

.col-md-5 {width: 41.66667%;}

.col-md-4 {width: 33.33333%;}

.col-md-3 {width: 25%;}

.col-md-2 {width: 16.66667%;}

.col-md-1 {width: 8.33333%;}

.mono-md-5 {width: 20%;}

.mono-md-7 {width: 14.28571%;}

.mono-md-8 {width: 12.5%;}

.mono-md-9 {width: 11.11111%;}

.mono-md-10 {width: 10%;}

.mono-md-11 {width: 9.09091%;}

}

@media screen and (min-width: 1200px) {

.col-lg-12 {width: 100%;}

.col-lg-11 {width: 91.66667%;}

.col-lg-10 {width: 83.33333%;}

.col-lg-9 {width: 75%;}

.col-lg-8 {width: 66.66667%;}

.col-lg-7 {width: 58.33333%;}

.col-lg-6 {width: 50%;}

.col-lg-5 {width: 41.66667%;}

.col-lg-4 {width: 33.33333%;}

.col-lg-3 {width: 25%;}

.col-lg-2 {width: 16.66667%;}

.col-lg-1 {width: 8.33333%;}

.mono-lg-5 {width: 20%;}

.mono-lg-7 {width: 14.28571%;}

.mono-lg-8 {width: 12.5%;}

.mono-lg-9 {width: 11.11111%;}

.mono-lg-10 {width: 10%;}

.mono-lg-11 {width: 9.09091%;}

}

.row:not(.flex) *[class^="col-xs-"],

.row:not(.flex) *[class^="size-xs-"],

.row:not(.flex) *[class^="mono-xs-"] {float: left;}

.row:not(.flex).reverse *[class^="col-xs-"],

.row:not(.flex).reverse *[class^="size-xs-"],

.row:not(.flex).reverse *[class^="mono-xs-"] {float: right;}

.row.flex {display: flex; flex-wrap: wrap;}

.row.flex.reverse {flex-direction: row-reverse;}

@media print, screen and (min-width: 768px) {

.row:not(.flex) *[class^="col-sm-"],

.row:not(.flex) *[class^="size-sm-"],

.row:not(.flex) *[class^="mono-sm-"] {float: left;}

.row:not(.flex).reverse *[class^="col-sm-"],

.row:not(.flex).reverse *[class^="size-sm-"],

.row:not(.flex).reverse *[class^="mono-sm-"] {float: right;}

}

@media screen and (min-width: 992px) {

.row:not(.flex) *[class^="col-md-"],

.row:not(.flex) *[class^="size-md-"],

.row:not(.flex) *[class^="mono-md-"] {float: left;}

.row:not(.flex).reverse *[class^="col-md-"],

.row:not(.flex).reverse *[class^="size-md-"],

.row:not(.flex).reverse *[class^="mono-md-"] {float: right;}

}

@media screen and (min-width: 1200px) {

.row:not(.flex) *[class^="col-lg-"],

.row:not(.flex) *[class^="size-lg-"],

.row:not(.flex) *[class^="mono-lg-"] {float: left;}

.row:not(.flex).reverse *[class^="col-lg-"],

.row:not(.flex).reverse *[class^="size-lg-"],

.row:not(.flex).reverse *[class^="mono-lg-"] {float: right;}

}

.col-xs-offset-12 {margin-left: 100%;}

.col-xs-offset-11 {margin-left: 91.66667%;}

.col-xs-offset-10 {margin-left: 83.33333%;}

.col-xs-offset-9 {margin-left: 75%;}

.col-xs-offset-8 {margin-left: 66.66667%;}

.col-xs-offset-7 {margin-left: 58.33333%;}

.col-xs-offset-6 {margin-left: 50%;}

.col-xs-offset-5 {margin-left: 41.66667%;}

.col-xs-offset-4 {margin-left: 33.33333%;}

.col-xs-offset-3 {margin-left: 25%;}

.col-xs-offset-2 {margin-left: 16.66667%;}

.col-xs-offset-1 {margin-left: 8.33333%;}

.col-xs-offset-0 {margin-left: 0;}

@media print, screen and (min-width: 768px) {

.col-sm-offset-12 {margin-left: 100%;}

.col-sm-offset-11 {margin-left: 91.66667%;}

.col-sm-offset-10 {margin-left: 83.33333%;}

.col-sm-offset-9 {margin-left: 75%;}

.col-sm-offset-8 {margin-left: 66.66667%;}

.col-sm-offset-7 {margin-left: 58.33333%;}

.col-sm-offset-6 {margin-left: 50%;}

.col-sm-offset-5 {margin-left: 41.66667%;}

.col-sm-offset-4 {margin-left: 33.33333%;}

.col-sm-offset-3 {margin-left: 25%;}

.col-sm-offset-2 {margin-left: 16.66667%;}

.col-sm-offset-1 {margin-left: 8.33333%;}

.col-sm-offset-0 {margin-left: 0;}

}

@media screen and (min-width: 992px) {

.col-md-offset-12 {margin-left: 100%;}

.col-md-offset-11 {margin-left: 91.66667%;}

.col-md-offset-10 {margin-left: 83.33333%;}

.col-md-offset-9 {margin-left: 75%;}

.col-md-offset-8 {margin-left: 66.66667%;}

.col-md-offset-7 {margin-left: 58.33333%;}

.col-md-offset-6 {margin-left: 50%;}

.col-md-offset-5 {margin-left: 41.66667%;}

.col-md-offset-4 {margin-left: 33.33333%;}

.col-md-offset-3 {margin-left: 25%;}

.col-md-offset-2 {margin-left: 16.66667%;}

.col-md-offset-1 {margin-left: 8.33333%;}

.col-md-offset-0 {margin-left: 0;}

}

@media screen and (min-width: 1200px) {

.col-lg-offset-12 {margin-left: 100%;}

.col-lg-offset-11 {margin-left: 91.66667%;}

.col-lg-offset-10 {margin-left: 83.33333%;}

.col-lg-offset-9 {margin-left: 75%;}

.col-lg-offset-8 {margin-left: 66.66667%;}

.col-lg-offset-7 {margin-left: 58.33333%;}

.col-lg-offset-6 {margin-left: 50%;}

.col-lg-offset-5 {margin-left: 41.66667%;}

.col-lg-offset-4 {margin-left: 33.33333%;}

.col-lg-offset-3 {margin-left: 25%;}

.col-lg-offset-2 {margin-left: 16.66667%;}

.col-lg-offset-1 {margin-left: 8.33333%;}

.col-lg-offset-0 {margin-left: 0;}

}

.col-xs-pull-12 {right: 100%;}

.col-xs-pull-11 {right: 91.66667%;}

.col-xs-pull-10 {right: 83.33333%;}

.col-xs-pull-9 {right: 75%;}

.col-xs-pull-8 {right: 66.66667%;}

.col-xs-pull-7 {right: 58.33333%;}

.col-xs-pull-6 {right: 50%;}

.col-xs-pull-5 {right: 41.66667%;}

.col-xs-pull-4 {right: 33.33333%;}

.col-xs-pull-3 {right: 25%;}

.col-xs-pull-2 {right: 16.66667%;}

.col-xs-pull-1 {right: 8.33333%;}

.col-xs-pull-0 {right: auto;}

@media print, screen and (min-width: 768px) {

.col-sm-pull-12 {right: 100%;}

.col-sm-pull-11 {right: 91.66667%;}

.col-sm-pull-10 {right: 83.33333%;}

.col-sm-pull-9 {right: 75%;}

.col-sm-pull-8 {right: 66.66667%;}

.col-sm-pull-7 {right: 58.33333%;}

.col-sm-pull-6 {right: 50%;}

.col-sm-pull-5 {right: 41.66667%;}

.col-sm-pull-4 {right: 33.33333%;}

.col-sm-pull-3 {right: 25%;}

.col-sm-pull-2 {right: 16.66667%;}

.col-sm-pull-1 {right: 8.33333%;}

.col-sm-pull-0 {right: auto;}

}

@media screen and (min-width: 992px) {

.col-md-pull-12 {right: 100%;}

.col-md-pull-11 {right: 91.66667%;}

.col-md-pull-10 {right: 83.33333%;}

.col-md-pull-9 {right: 75%;}

.col-md-pull-8 {right: 66.66667%;}

.col-md-pull-7 {right: 58.33333%;}

.col-md-pull-6 {right: 50%;}

.col-md-pull-5 {right: 41.66667%;}

.col-md-pull-4 {right: 33.33333%;}

.col-md-pull-3 {right: 25%;}

.col-md-pull-2 {right: 16.66667%;}

.col-md-pull-1 {right: 8.33333%;}

.col-md-pull-0 {right: auto;}

}

@media screen and (min-width: 1200px) {

.col-lg-pull-12 {right: 100%;}

.col-lg-pull-11 {right: 91.66667%;}

.col-lg-pull-10 {right: 83.33333%;}

.col-lg-pull-9 {right: 75%;}

.col-lg-pull-8 {right: 66.66667%;}

.col-lg-pull-7 {right: 58.33333%;}

.col-lg-pull-6 {right: 50%;}

.col-lg-pull-5 {right: 41.66667%;}

.col-lg-pull-4 {right: 33.33333%;}

.col-lg-pull-3 {right: 25%;}

.col-lg-pull-2 {right: 16.66667%;}

.col-lg-pull-1 {right: 8.33333%;}

.col-lg-pull-0 {right: auto;}

}

.col-xs-push-12 {left: 100%;}

.col-xs-push-11 {left: 91.66667%;}

.col-xs-push-10 {left: 83.33333%;}

.col-xs-push-9 {left: 75%;}

.col-xs-push-8 {left: 66.66667%;}

.col-xs-push-7 {left: 58.33333%;}

.col-xs-push-6 {left: 50%;}

.col-xs-push-5 {left: 41.66667%;}

.col-xs-push-4 {left: 33.33333%;}

.col-xs-push-3 {left: 25%;}

.col-xs-push-2 {left: 16.66667%;}

.col-xs-push-1 {left: 8.33333%;}

.col-xs-push-0 {left: auto;}

@media print, screen and (min-width: 768px) {

.col-sm-push-12 {left: 100%;}

.col-sm-push-11 {left: 91.66667%;}

.col-sm-push-10 {left: 83.33333%;}

.col-sm-push-9 {left: 75%;}

.col-sm-push-8 {left: 66.66667%;}

.col-sm-push-7 {left: 58.33333%;}

.col-sm-push-6 {left: 50%;}

.col-sm-push-5 {left: 41.66667%;}

.col-sm-push-4 {left: 33.33333%;}

.col-sm-push-3 {left: 25%;}

.col-sm-push-2 {left: 16.66667%;}

.col-sm-push-1 {left: 8.33333%;}

.col-sm-push-0 {left: auto;}

}

@media screen and (min-width: 992px) {

.col-md-push-12 {left: 100%;}

.col-md-push-11 {left: 91.66667%;}

.col-md-push-10 {left: 83.33333%;}

.col-md-push-9 {left: 75%;}

.col-md-push-8 {left: 66.66667%;}

.col-md-push-7 {left: 58.33333%;}

.col-md-push-6 {left: 50%;}

.col-md-push-5 {left: 41.66667%;}

.col-md-push-4 {left: 33.33333%;}

.col-md-push-3 {left: 25%;}

.col-md-push-2 {left: 16.66667%;}

.col-md-push-1 {left: 8.33333%;}

.col-md-push-0 {left: auto;}

}

@media screen and (min-width: 1200px) {

.col-lg-push-12 {left: 100%;}

.col-lg-push-11 {left: 91.66667%;}

.col-lg-push-10 {left: 83.33333%;}

.col-lg-push-9 {left: 75%;}

.col-lg-push-8 {left: 66.66667%;}

.col-lg-push-7 {left: 58.33333%;}

.col-lg-push-6 {left: 50%;}

.col-lg-push-5 {left: 41.66667%;}

.col-lg-push-4 {left: 33.33333%;}

.col-lg-push-3 {left: 25%;}

.col-lg-push-2 {left: 16.66667%;}

.col-lg-push-1 {left: 8.33333%;}

.col-lg-push-0 {left: auto;}

}

3@TECH BLOG

グリッドシステム　sun@grid改（flex版）

Source

Like this:

Contact お問い合わせ

3@TECH BLOG

Source

Share this:

Like this:

Contact お問い合わせ